a "rollover" is an image that changes when the mouse pointer hovers over it. "rollovers" only work on netscape 3 and higher and IE4 and higher. if you're using one of those browsers to view this page, you can see an example of rollovers below by pointing to the sample images:
so, everyone likes rollovers cause they're fun, but most of the scripts i've seen for them lately actually hard-code the references to the images so you have to cut'n'paste all your image initialization code. yuck. to spare us all "CTRL-C, CTRL-V" pinky finger syndrome, i wrote this little script which initializes your images using a loop and arrays. i won't go into how the code works here so much as how to use it.
okay, so you've copied the code above into a page. suppose you saved it as mypage.html in a directory called /htmlfiles/. now also suppose you've made a directory under /htmlfiles/ called /images/. for the sake of the example, you'll be making two images with rollovers. follow these steps:
STEP ONE: IMAGE NAMES
- first, let's get the images named correctly. if you want to use this code, you *must* name all your images in a standard sequential way. consider the following sequence of images used in our example:
here's how the naming convention works: the image prefix comes first (in our example it's "sample"), then the number of the image (eg. "1", "2"), then either "off" or "on" for the inactive and rolled-over states of your image. finally, you add the file extension ".gif". you'll need to make and name four images according to that convention, and put them in the /images/ directory under /htmlfiles/.
STEP TWO: IMAGE TAGS
- now you need to refer to your images in the your page's html code. you insert them with the standard img tag (see sample code above). but there's one important difference: you must *name* your images so the script knows which image to change when the mouse points to it. you name images simply by using the NAME attribute (eg. NAME="image1"). the names you'll be using with this code must be constructed like this: "image1", "image2", "image3" etc. for the script to work, you have to use the word "image" as your image name prefix (regardless of what you called the actual image file in step one). so if you called your images "button1off.gif", "button1on.gif" in step one, your image tag would look like this:
<IMG SRC="images/button1off.gif" HEIGHT="20" WIDTH="150" BORDER="0" ALT="Image Description" NAME="image1">
it's also important that you give your images a height and a width value, and that the "on" state and the "off" state of your images have the same height and width. browsers may encounter errors if the height and width values don't match.
STEP THREE: ANCHOR TAGS
STEP THREE: TELL THE SCRIPT HOW MANY IMAGES YOU WANT TO CHANGE
- remember that this script will automatically pre-load all your images for you. all you need to do is tell it how many images you have and where to find those images. find the line that reads:
var num_images = 2;
and change the number 2 to the number of images you want to change.
STEP FOUR: TELL THE SCRIPT WHAT YOUR IMAGES ARE CALLED
- you're almost done. all you have to do now is tell the script where you put your images and what you called them. remember that the images will all have been named something like:
as i mentioned before, you can change the prefix (ie. the "sample" part of the file name) to anything you like, eg. "button1off.gif", "button1on.gif", but you have to tell the script about it.
find the line that reads:
var imagePrefix = "images/sample";
and change the word "sample" to match whatever you called your series of images. you may also change the location of the images relative to your html file, so if your images are in a directory called "pics", one level up from your document, and your images are named "button1on.gif", "button1off.gif", etc, then your new line should read:
var imagePrefix = "../pics/button";
and that's it. go open your file in a browser and get rolling :)
please report bugs/issues to email@example.com.
- may 7, 1999: posted.
- january 25, 2000: finally revised the script so you could set the num_images variable to actually match the number of images you want to roll over, instead of that number plus 1. also did some general clean up to the instructions.
- january 26, 2000: moved the cut'n'paste code into a form for easier cutting. this actually also solved a mac problem: when ie 4.5 saw lessthan & equals next to each other (<=), it interpreted them as a comment tag and hid some of the code. i also converted the markup in this page to use an external stylesheet.