鼠标悬停在html上的图像上

Question

我试图让鼠标悬停时改变图像.这段代码适用于IE,但不适用于其他浏览器,如chrome,opera,safari等.任何想法？

<a href="#" onmouseover="document.myimage1.src='img/login_button_22.jpg';"
onmouseout="document.myimage1.src='img/login_button_11.jpg';">    
<img src="img/login_button_11.jpg" name="myimage1" /> </a>

Answer 1

您应该使用ID而不是NAME,并使用document.getElementById选择元素.

不是FORM元素的IMG元素不应该具有NAME属性,但是Microsoft设法搞砸了.

<a href="#" onmouseover="document.getElementById('myimage1').src='img/login_button_22.jpg';"
onmouseout="document.getElementById('myimage1').src='img/login_button_11.jpg';">    
<img src="img/login_button_11.jpg" id="myimage1" /></a>

此外,使用CSS背景和:hover声明更容易和更清晰,并完全使用JavaScript跳过此操作.

这是如何做:

HTML:

<a class="mybutton" href="#"></a>

CSS(相应地调整尺寸):

.myButton {
     width:100px;
     height:50px;
     display:block;
     background-image:url(../img/login_button_11.jpg);

}

.myButton:hover {
     background-image:url(../img/login_button_22.jpg)
}