Woody's
>
JavaScripts
>
imageRollOver Demo
|
imageRollOver Script
Image Rollover
To install this script, follow these simple steps:
1. Cut and paste this script into the
HEAD
of your document:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript"> <!-- /* Written by: Mark Woodward (August, 1998) Woody's JavaScripts at: woody.cowpi.com/javascripts.html */ function preLoadImages() { // This function preloads images. This lets the image // rollover to appear instantaneous. imageOrig = new Image(124,39); // set your image's width, height imageOrig.src = 'original.gif'; // set URL for your image imageRoll = new Image(124,39); // set your image's width, height imageRoll.src = 'rollover.gif'; // set URL for your image } function getRoll() { // This function reassigns the URL to the image with yourImageName. // yourImageName must be identical to name property in the image tag. document.yourImageName.src = imageRoll.src; } function getOrig() { document.yourImageName.src = imageOrig.src; } // --> </SCRIPT>
2. Cut and paste this into the
BODY TAG
of your document:
<BODY onLoad="preLoadImages();"> <!-- This calls the function when page is loaded into browser. -->
3. Cut and paste this into the
BODY
of your document:
<A HREF="URL for your link" onMouseOver="getRoll();" onMouseOut="getOrig();"> <IMG NAME="yourImageName" SRC="original.gif" ALT="Image Description" WIDTH=124 HEIGHT=39 BORDER=0></A> <!-- Notes: + SRC property above must be same as URL used for imageOrig.src in the preLoadImages function. + The original image will be displayed in browser even if javascript has been disabled. Just the rollover image will not be seen. + All width and height data for images must match. -->
Updated: 2001-01-30