Simple javaScript Roll Over Image Code

Images must be .png
Images must be in ‘images’ folder
Roll over images must have ‘o’ (for over) in the name
example:
Original images: images/Bird.png
Roll Over image: images/Birdo.png

The link would be <a href=”link.html”  onMouseOver=”MouseRollover(this, ‘Bird’)”  onMouseOut=”MouseOut(this, ‘Bird’)”><img src=”images/Bird.png”></a>

 

*if your images are .png then change the Script below to the proper extension
**** THE JAVASCRIPT *************
<script language=”javascript”>
function MouseRollover(MyImage, img) {
MyImage.src = “images/” + img + “o.png”;
}
function MouseOut(MyImage, img) {
MyImage.src = “images/” + img + “.png”;
}
</script>

***************THE LINK FOR THE ROLL OVER IMAGE************
<a href=”http://www.google.com”><img src=”images/2.png” onMouseOver=”MouseRollover(this, ‘2’)” onMouseOut=”MouseOut(this,’2′)”></a>

You may also like...