onmouseoverでDivの画像ソースを変更する

Question

divを含む画像ソースを変更することはできますか？画像は動的でデータベースから取り出されます。

v = $"<div onmouseover=\"document.navIcon.src='/Images/White/{reader[2]}';\" 
     onmouseout=\"document.navIcon.src='/Images/{reader[2]}';\"> 
<img name=\"navIcon\" src=\"Images/{reader[2]}\"><br>{reader[1]}</div>"; 

これは私の考えですが、期待通りには動作しません。私は<にonmouseover部分を置いたときに動作させることができました。しかし、画像の上だけでなく、リーダー[1]のようにdivのどこでも変更したいと思います。

思考？

Answer 1

私はGoogle画像検索から外れ一部のイメージをつかみました。 thisを使用すると、現在の要素を参照できます。

<img 
 
    src='https://osu.ppy.sh/forum/images/smilies/50.gif' 
 
    onmouseover='this.src="http://4.bp.blogspot.com/-YrmTHhfMtFU/VJNbpDMHzgI/AAAAAAAAH8c/g3dJ1Q-QTrc/s1600/smile.png"' 
 
    onmouseout='this.src="https://osu.ppy.sh/forum/images/smilies/50.gif"' 
 
    />

---

編集..

あなたが "hoverme" クラス名を使って何に置くと、これは、画像を変更します。

(function() { 
 
    var img1 = "https://osu.ppy.sh/forum/images/smilies/50.gif"; 
 
    var img2 = "http://4.bp.blogspot.com/-YrmTHhfMtFU/VJNbpDMHzgI/AAAAAAAAH8c/g3dJ1Q-QTrc/s1600/smile.png"; 
 
    var myimg = document.getElementById('myimg'); 
 
    myimg.src = img1; 
 
    var hoverables = document.getElementsByClassName('hoverme'); 
 
    for (var i = hoverables.length; i--;) { 
 
    hoverables[i].addEventListener("mouseover", hoverMe, false); 
 
    hoverables[i].addEventListener("mouseout", unhoverMe, false); 
 
    } 
 

 
    function hoverMe() { 
 
    myimg.src = img2; 
 
    } 
 

 
    function unhoverMe() { 
 
    myimg.src = img1; 
 
    } 
 
})();

<img class='hoverme' id='myimg' /> 
 

 
<p class='hoverme'>poooooooop</p> 
 

 
<div class='hoverme'>This si a diiiiivvvvv</div>

Answer 2

これを達成する最良の方法は、CSSを使用することです。

HTML

<img id="NavIcon"> 

CSS

#Navicon { 
    background-image: url(image1.jpg); 
} 
#NavIcon:hover { 
    background-image: url(image2.jpg); 
}