roll-over images

A lot of people have images that change when you hover over them. These are used for attractive-looking links. They're fairly simple to do, once you have the code. There are two ways to do this, and I'll explain the faster and cleaner method first.

method 1

This method is easier for people who plan on using multiple roll over images. This example shows how to code for two images. First, place this code in your header.

<script> if (document.images) { var ImgOver=new Array (); ImgOver[0]=new Image (); ImgOver[1]=new Image (); ImgOver[0].src="hover image URL"; ImgOver[1].src="hover image URL"; var ImgOut=new Array (); ImgOut[0]=new Image (); ImgOut[1]=new Image (); ImgOut[0].src="original image URL"; ImgOut[1].src="original image URL"; } </script>
Now, where you want the roll over image to appear, place this code (replace # with the number of the image used in the code above):

<a href="yourpage.html" onMouseOver="RollOver(#)" OnMouseOut="rollOut (#)"><img src="original image URL here"></a>

method 2

This method creates a bulkier code (if you have multiple images), but it works just as well. First, place this code in your header:

<script language="JavaScript"> <!-- Hide the script from old browsers -- img0_on = new Image; img0_on.src="url of image when you hover"; img0_off = new Image; img0_off.src="url of normal image"; function over_image(parm_name) { document[parm_name].src = eval(parm_name + "_on.src"); } function off_image(parm_name) { document[parm_name].src = eval(parm_name + "_off.src"); } // --End Hiding Here --> </script>
Be sure to replace the specified areas with the proper image URLs. Then, here is how you format the image code. Put this in the place where you want the image to appear.

<center><a href="your page" onmouseover="over_image('img0');" onmouseout="off_image('img0')"><img src="url of the image when you DON'T hover" border="0" name="img0"></a>
If you want to have more than one image on your site that does this, then you must repeat the previous two steps. However, replace ANYWHERE that has "img0" with "img1", "img2", and so forth. Remember that you must completely repeat the code in the header, from script tag to script tag. That's very important.

And viola! You have fancy roll-over images!

Back