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.

the code
to implement rollovers on a page, you need a few things: 1) the javascript code that initializes all the rollover-enabled images 2) the javascript code to swap an image on, 3) the javascript code to swap an image off, 4) the html code that calls the on/off swapping code, and finally, 5) the html code to give your images unique names (so the javascript knows what to turn on and off). you can get all those things by copy'n'pasting the html document below. then you'll need to customize your code...so head on down past the sample code and i'll tell you how.

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:

sample1off.gif
sample1on.gif
sample2off.gif
sample2on.gif

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

anchor tags are what make rollovers possible from an html standpoint. in the world of javascript, older browsers (eg. netscape 3) are only aware of the mouse's location relative to links. so if the mouse is over a link, the link knows about it, and can tell a javascript function about it through an event handler. we need our links to tell our functions when the mouse is over the linked image, and when the mouse goes off the linked image. the event handlers that do that are called MOUSEOVER and MOUSEOUT. look at the anchor tags in the sample code above. the MOUSEOVER attribute calls the function rollon, which changes the image to the rollover state, and the MOUSEOUT attribute calls the function rollout, which changes the image back to the inactive state. each of those functions (rollon and rollout) needs to know which image to change. that's indicated by the 'image1' and 'image2' contained by the round parentheses. you need to set those values to match the name of the image (from step two) you want to change.

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:

sample1off.gif
sample1on.gif
sample2off.gif
sample2on.gif

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 :)

known issues
none yet.
please report bugs/issues to colin_moock@iceinc.com.

notes about the script

1. something that's a little unique about this rollover script is that the rollon/rolloff functions both check to see if an image has finished loading before executing. you could get broken images as rollovers or even javascript errors if you don't check that first.
   
   
2. i don't use the ever popular "if document.images" check to exclude IE3 because i check the version of javascript first. as a general rule, i think this is a safer practise. here's why
   
   

revision history

1. may 7, 1999: posted.
2. 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.
3. 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.