javascript - 鼠标悬停在 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 而不是名称，并使用 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)
}