将鼠标悬停在 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 来选择元素。

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)
}

Answer 2

<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">

演示http://jsfiddle.net/W6zs5/

Answer 3

试试这个：

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