Unobtrusive Mouseover script

Download the most recent version from the scripts page.

Most rollover scripts require all kinds of tags, or additional function calls in a page. This version aims to be as unobtrusive as I can think of: Link the script file into the document head, assign a class to any image that is supposed to be a rollover, and use a predefined naming convention for the various rollover states. Additionally, this script does not prevent the page from loading until all rollovers are loaded. I guess there is an argument either way, but I prefer to allow a page to load as fast as possible. If a rollover image has not loaded fully, it will not be swapped in until it loads.

Attach a rollover to an image

  1. Image must have class=rollover assigned to be a rollover.
  2. In the document head, add a reference to the rollover script:
       <script src="roll.js" type="text/javascript"></script>
  3. Save additional images for the states with the same name as the main image, plus the suffixes used below:
       main image is:           image.jpg
       mouse over (hover) is:   image_H.jpg
       mouse click (active) is: image_A.jpg
  4. If you do not want to have the active state (ie, the image just changes when the mouse is over the image, but there is no different image when the mouse is clicked), change line 35 of roll.js to:
       useAct = false;

Example images below

load, rollover, click load, rollover only image enclosed in a link -- best option

Known Issues

Script does not realize that an image is missing in some browsers.
If you do not want to use the mousedown state, it's better to either make an image for all three states, even if one is a copy of another state, or set 'useAct' in the javascript file to false, because i can't get netscape to recognize a missing image :(
If you assign an onload event in the <body> tag, it will override and eliminate the onload call setup for this script.
Solution is to use Simon Willison's addLoadEvent() function included in the roll.js script for any onload events, instead of writing directly into the <body> tag. As you have this script already referenced on this page, you can add the following for any functions to call. Note that it calls the function name, without the parentheses, and not in quotes:
<script type="text/javascript">addLoadEvent(functionToRunOnLoad);</script>
Does not work in Netscape 4.77 or IE4.5 Mac
Only image shows. The script does not add the hover or active states to the image or link.
Netscape 6.2 must have all images.
If an image is missing, such as in the active state, when the image is clicked on, it will shrink to a tiny speck and disappear almost completely. Avoid this by always having all the images that the script is expecting.