MouseOver Image

Warning - 2005-09-04 - The code on this page hasn't been updated since 2000, and represents an old mouseover technique.

Here is a method that preloads the images, and you can use whatever names for the image files that you want. It's just a little more cumbersome.

Put this script in:
<script language="javascript">
<!---
pic01over = new Image;
pic01over.src="picafter.gif";
pic01out = new Image;
pic01out.src="picbefore.gif";
pic02over = new Image;
pic02over.src="picafter.gif";
pic02out = new Image;
pic02out.src="picbefore.gif";

function hover(picName) {
  imagename=picName.substring(0,5);
  document[imagename].src=eval(picName+".src");
}
//-->
</script>

Then put these href and image tags in:
<a href="nowhere" onclick="return false" onmouseover="hover('pic01over')" 
onmouseout="hover('pic01out')"><img src="picbefore.gif" name="pic01" border=0></a>

<a href="nowhere" onclick="return false" onmouseover="hover('pic02over')" 
onmouseout="hover('pic02out')"><img src="picbefore.gif" name="pic02" border=0></a>

The first eight lines of the script set variables on the page load to the names of the image files you want to include. For example, "pic1over.src" will equal my image file called "picafter.gif". This is the mouseover image. The variable "pic1out.src" will equal "picbefore.gif". This is the mouseout and default image.

The function "hover" has an argument called "picName" that will either represent the onmouseover or onmouseout event. For example, the onmouseover event for "pic1" sends "pic1over" to the "hover" function. The first line of the function, imagename=picName.substring(0,5); sets the variable "imagename" equal to the first five letters of the variable "picName". (Note that there can only be up to 99 sets of images using this exact format; set up each "pic" term with an extra 0 for a higher max.)

The next line, document[imagename].src=eval(picName+".src"); sets the image source equal to the argument "picName". Both the onmouseover and onmouseout events are able to call the same function, because the argument "picName" will determine which event it is and what image to use.