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

Image must have class=rollover assigned to be a rollover.
In the document head, add a reference to the rollover script:
```
   <script src="roll.js" type="text/javascript"></script>
```

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

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

Left image has three images: load, rollover, and click.
Middle image is missing the click image (in mozilla, it will go back to the load state when clicked), but has rollover.
Right image has links surrounding it -- the events will be attached to the link rather than the image. This is the most compatible method as rollovers on images that are not links does not work in some older browsers

load, rollover only

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.

Copyleft

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.