4

我试图让图像在鼠标悬停时改变。这段代码适用于 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>
4

3 回答 3

7

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

IMG 元素，不是 FORM 元素，不应该具有 NAME 属性，但微软设法搞砸了。

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

:hover此外，使用 CSS 背景和声明并完全使用 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)
}
于 2012-11-27T15:25:40.770 回答
1 
<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/

于 2014-06-27T01:46:49.167 回答
1

试试这个：

<img src='img/login_button_11.jpg' onmouseover="this.src='img/login_button_22.jpg';" onmouseout="this.src='img/login_button_11.jpg';" />
于 2014-07-14T20:57:42.377 回答