Basic Mouseover Function - by Michael Tangen



1. Place the following code between the <head> </head> tags. Be sure to modify the variable imagePath to point to the relative or absolute path to where your images are stored.

<script language="javascript">
<!--
function imageSwap(imageID, imageName) {
	var imagePath = "/images/";
	document.getElementById(imageID).src = imagePath + imageName;
}
//-->
</script>

2. Ensure your image has a UNIQUE id value (id="valuehere") and be sure to specify the image name for both the mouseover image and the mouseout image. Both images should be the SAME SIZE for optimal performance.

<a href="#"><img src="images/off.gif" id="item" width="200" height="75" border="0" 
 onMouseOver="imageSwap(this.id,'over.gif')" onMouseOut="imageSwap(this.id,'off.gif')"/></a>