on mouse over change image on html
30,555
Solution 1
You should be using a ID, not a NAME, and using document.getElementById
to select the element.
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>
Also, it's much easier and cleaner to use a CSS background and a :hover
declaration and skip doing this using JavaScript completely.
Here's how:
HTML:
<a class="mybutton" href="#"></a>
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)
}
Solution 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/
Solution 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';" />
Comments
-
33528 almost 4 years
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>
-
33528 over 11 yearstrying it I can tell that it still works perfect on IE but again not working in all other explorers...