在鼠标上更改html上的图像

I was trying to make an image to change on mouse over. This piece of code works for IE but not for the other browsers like chrome, opera, safari, etc. Any ideas?

我试着在鼠标上创建一个图像。这段代码适用于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>

3 个解决方案

#1

You should be using a ID, not a NAME, and using document.getElementById to select the element.

您应该使用ID，而不是名称，并使用文档。getElementById选择元素。

IMG elements, not being FORM elements, should not be able to take on a NAME property, but Microsoft managed to screw this up.

IMG元素不是表单元素，不应该具有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>

Also, it's much easier and cleaner to use a CSS background and a :hover declaration and skip doing this using JavaScript completely.

此外，使用CSS背景和a:hover声明和跳过使用JavaScript完全可以更容易和更简洁。

Here's how:

方法如下:

HTML:

<a class="mybutton" href="#"></a>

CSS (adjust dimensions accordingly):

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

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

Demo http://jsfiddle.net/W6zs5/

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

#3

Try this:

试试这个:

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

#1