javascript mouseover图片交换问题

Question

I am trying to swap out a hover image with javascript but it doesn't seem to be working, any idea why? I thought this was the correct way to do this.

<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

It looks like all you need to do (assuming those images exists) is put single quotes around the src string.

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

I would suggest you use CSS :hover for the images though, as it separates presentation from content/scripting.

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

Answer 2

Via jQuery:

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