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>
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>
Share
Improve this question
edited Nov 27, 2012 at 15:25
Mr. Alien
157k36 gold badges303 silver badges285 bronze badges
asked Nov 27, 2012 at 15:23
3352833528
3826 gold badges12 silver badges30 bronze badges
3 Answers
Reset to default 7You 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 pletely.
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)
}
<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive./icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive./icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive./icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">
Demo http://jsfiddle/W6zs5/
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';" />