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';" />

鼠标悬停在html上的图像上

3 个答案: