rollover image effect.

Ever wondered how people made their images change when your mouse hovers over it? It could appear on navigation buttons where the background color changes or where a background image changes/appears. It is useful and quite fun to do. You just have to put 2 sets of codes into your coding and it would work nicely.

First of all, insert the javascript code into the < head > tags of your coding:

<SCRIPT LANGUAGE="JavaScript">
image1 = new Image();
image1.src = "original_image1.gif";

image2 = new Image();
image2.src = "original_image2.gif";

</script>



Where it says 'original_image1.gif' or 'original_image2.gif' you should enter the URL for your image. If you have more than 2 you could just make yourself image3...image4...image5 etc, following the same sequence. After you have copied that into your < head > tags, look at the following code:

<div style="position:absolute; left:0; top:0; overflow:no">
<a href="http://yoursite.com/wheretheimagelinksto" onmouseover="image1.src='original_image1.gif';" onmouseout="image1.src='rolloverimage.gif';">
<img name="image1" src="rolloverimage.gif" border=0></a></div>
<div style="position:absolute; left:0; top:300; overflow:no">
<a href="http://yoursite.com/wheretheimagelinksto" onmouseover="image2.src='original_image2.gif';" onmouseout="image2.src='rolloverimage2.gif';">
<img name="image2" src="rolloverimage2.gif" border=0></a> </div>