Einfügen eines Bildes auf der Maus über und onmouse

Question

Ich habe ein Bild in einem div, die ich versuche, zu ändern, wenn die Maus vorbei ist, dann zurück, wenn die Maus aus ist. Jedoch habe ich Schwierigkeiten beim Einfügen des Bildes in das div on mouse out. Ist der besondere Weg, um dies oder eine alternative Botschaft zu gehen. Die Probleme scheinen mit der Platzierung von Schrägstrichen in der HTML-Einfügung zu sein.

<div class='myImage' onmouseout='this.innerHTML = '<img src='./images/myImage.jpg' />' onmouseover='this.innerHTML = \"\"; this.style.backgroundColor = \"#1D4088\"' style='height:100px; width:100px'><image src='./images/myImage.jpg'></div> 

Answer 1

Ich denke, Ihre doppelte und einfache Anführungszeichen ein bisschen widersprüchlich, versuchen Sie JavaScript in eine Funktion setzen stattdessen

<div class="myImage" onmouseout="toggle(this,'1')" onmouseover="toggle(this,'2')" style="height:100px; width:100px"><image src="./images/myImage.jpg"></div> 

Und das Javascript

function toggle(e,a) { 
    if(a=='2') { 
     e.innerHTML = ''; 
     e.style.backgroundColor = '#1D4088'; 
    } else { 
     e.innerHTML = '<img src="./images/myImage.jpg" />'; 
     e.style.backgroundColor = ''; 
    } 
} 

Answer 2

hmm scheint youre überkomplizierende Dinge, keine Sorge.

versuchen Sie, die Tutorials von'sprite' zu folgen.

Here's eine gute:

und wenn Sie wirklich wollen, in sie erhalten: http://css-tricks.com/css-sprites/