鼠标悬停在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>

- 33528

Answer 1

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

IMG元素不是FORM元素，因此不应该拥有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)
}

- Diodeus - James MacFarlane

---

尝试后，我可以告诉您它在IE上仍然完美运行，但在所有其他浏览器中仍然无法工作... - 33528

Answer 2

尝试一下：

<img src='img/login_button_11.jpg' onmouseover="this.src='img/login_button_22.jpg';" onmouseout="this.src='img/login_button_11.jpg';" />

- kurdtpage

Answer 3

<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">

Demo http://jsfiddle.net/W6zs5/

- Sad Danbo