javascript - JavaScriptマウスオーバー画像スワップの問題

Question

ホバー画像を JavaScript で交換しようとしていますが、うまくいかないようです。これが正しいやり方だと思いました。

<li>
   <a onMouseOver="document.fbi.src=images/facebookIconHover.jpg" onMouseOut="document.fbi.src=images/facebookIcon.jpg"
href="http://www.facebook.com">
     <img src="images/facebookIcon.jpg" NAME="fbi">
  </a>
</li>

Answer 1

(これらの画像が存在すると仮定して) 行う必要があるのは、src文字列を一重引用符で囲むことだけです。

onMouseOver="document.fbi.src='images/facebookIconHover.jpg'"
onMouseOut="document.fbi.src='images/facebookIcon.jpg'"

:hoverただし、プレゼンテーションとコンテンツ/スクリプトを分離するため、画像にはCSS を使用することをお勧めします。

#element {
   background-image:url('url1.png');
}
#element:hover {
   background-image:url('url2.png');
}

Answer 2

jQuery経由：

$('img[name="fbi"]').hover(function(){
    $(this).attr('src','images/facebookIconHover.jpg');
},function(){
    $(this).attr('src','images/facebookIcon.jpg');
});