Uncle Jim's Javascript Designs
Rollover Image Swapping
Author:
Jim Stiles
This example shows you how to set up Image Rollover effects using preloaded images.
As you roll your mouse over the buttons, they appear to depress.
INSTALLATION INSTRUCTIONS
COPY
-
Insert Between Head Tags: <HEAD></HEAD>
<SCRIPT LANGUAGE="JavaScript"><!-- image1 = new Image(); image1.src = "images/IMAGE_ON1.jpg"; image2 = new Image(); image2.src = "images/IMAGE_ON2.jpg"; image3 = new Image(); image3.src = "images/IMAGE_ON3.jpg"; image4 = new Image(); image4.src = "images/IMAGE_ON4.jpg"; image5 = new Image(); image5.src = "images/IMAGE_ON5.jpg"; image6 = new Image(); image6.src = "images/IMAGE_ON6.jpg"; image7 = new Image(); image7.src = "images/IMAGE_ON7.jpg"; image8 = new Image(); image8.src = "images/IMAGE_ON8.jpg"; //--></script>
COPY
-
Insert Inside Body: <BODY></BODY>
<center><table border="0" cellpadding="0" cellspacing="0" width="50%"><tr> <td align="center" valign="top"><a href="http://www.YOURDOMAIN.com" onmouseover="image1.src='images/IMAGE_ON1.jpg';" onmouseout="image1.src='images/IMAGE_OFF1.jpg';"><img name="image1" src="images/IMAGE_OFF1.jpg" border=0></a><br> <a href="mailto:YOUREMAIL@yahoo.com" onmouseover="image2.src='images/IMAGE_ON2.jpg';" onmouseout="image2.src='images/IMAGE_OFF2.jpg';"><img name="image2" src="images/IMAGE_OFF2.jpg" border=0></a><br> <a href="http://YOURDOMAIN.com/index1.html" onmouseover="image3.src='images/IMAGE_ON3.jpg';" onmouseout="image3.src='images/IMAGE_OFF3.jpg';"><img name="image3" src="images/IMAGE_OFF3.jpg" border=0></a><br> <a href="http://YOURDOMAIN.com/index2.html" onmouseover="image4.src='images/IMAGE_ON4.jpg';" onmouseout="image4.src='images/IMAGE_OFF4.jpg';"><img name="image4" src="images/IMAGE_OFF4.jpg" border=0></a><br> </td><td align="center" valign="top"> <a href="http://www.YOURDOMAIN.com" onmouseover="image5.src='images/IMAGE_ON5.jpg';" onmouseout="image5.src='images/IMAGE_OFF5.jpg';"><img name="image5" src="images/IMAGE_OFF5.jpg" border=0></a><br> <a href="mailto:YOUREMAIL@yahoo.com" onmouseover="image6.src='images/IMAGE_ON6.jpg';" onmouseout="image6.src='images/IMAGE_OFF6.jpg';"><img name="image6" src="images/IMAGE_OFF6.jpg" border=0></a><br> <a href="http://YOURDOMAIN.com/index1.html" onmouseover="image7.src='images/IMAGE_ON7.jpg';" onmouseout="image7.src='images/IMAGE_OFF7.jpg';"><img name="image7" src="images/IMAGE_OFF7.jpg" border=0></a><br> <a href="http://YOURDOMAIN.com/index2.html" onmouseover="image8.src='images/IMAGE_ON8.jpg';" onmouseout="image8.src='images/IMAGE_OFF8.jpg';"><img name="image8" src="images/IMAGE_OFF8.jpg" border=0></a><br> </td></tr></table></center><br>
Close This Window
