I saw my first rollover on one of Netscape's 3.0 Preview pages, and I immediately wanted to know how make one. With the example page's source code, Netscape's developer pages and a few wonderful web tutorials, I managed to figure it out for myself. This page is my way of thanking all those who helped me learn.
Five years later, this is still the most visited page on my site.
This is the third major revision of the page. Everything still works, so there wasn't much to change, I revised it a little, corrected a typo that no one ever commented on*. The original page is still here.
Starting the Script
customary to place them inside the
Comments are ignored information. They usually serve as author's notes
about how the code works. HTML's syntax for comments is
Declaring Images in the Script
It is possible to have a rollover without declaring and preloading the images, but before the images changes the browser must first open a new connection and load the second image. This takes long enough, even on fast connections, to make the rollover less effective.
To preload the images, each is declared in two lines of an array. Arrays
are like mini files, storing several pieces of information all in one
place. Our array, named
Rollimage = new Array() Rollimage = new Image(100,150) Rollimage.src = "your_image.gif" Rollimage = new Image(100,150) Rollimage.src = "your_other_image.gif"
The first line initializes the array, and following numbered sets of lines are the declaration of each additional image. The first line of each set declares the image's size and the second assigns its address. The numbers inside the parentheses refer to the width and height of the image, in that order. All of my example images are in the same folder as the HTML file so they can be addressed with only their name, a non-local image would have its full URL in the second line.
claims to be partly case sensitive but the boundaries of when it is and
isn't are unclear. To be on the safe side, be sure to refer to your variables
and arrays with consideration of case.
Naming Image Objects
replace. Do this by including a name attribute in the
The browser counts every image on a page and refers to them numerically starting from the first image. The above refers to the third image tag in the HTML document (count like a computer, zero comes first).
I've found named images easier to keep track of so that's what I use in this example. The following image is named "Rupert":
That function's name is
Putting It All Together
That's basically it. Following is the complete code for a simple document with one rollover image. Try it out.
You can also copy that source code here:
Notes and Frequently Asked Questions
Thanks to Lynda Weinman for including my original rollover page in her book <designing web graphics.2> (the yellow one). While this page no longer appears in the revised book, I appreciate the inclusion and am thankful for all her support over the years.
Thanks also to all the poeple who have written about this page. It's been great to hear from you and to see all the site using this code.
If you use this script, please include a link to my site so other people can share this information too.
I'm working on a page that will link to all the sites using my code, send me a note so I can include yours too. The more pages we link, the more people will see them.
Film & Video
Final Cut Pro
Site Notes Archive (weblog)
About Joe Maller
Past Home Pages Etc.