鼠标悬停在html上的图像上 [英] on mouse over change image on html

问题描述

我试图在鼠标移动时制作图像。这段代码适用于IE，但不适用于其他浏览器，如chrome，opera，safari等。任何想法？

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?

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

推荐答案

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

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

IMG元素，不是FORM元素，不应该能够接受一个NAME属性，但微软设法搞砸了。

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

<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背景和更简单，更清晰：悬停声明并完全使用JavaScript跳过此操作。

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

以下是：

HTML：

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

CSS（相应调整尺寸）：

CSS (adjust dimensions accordingly):

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

这篇关于鼠标悬停在html上的图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！