DOM Image Rollover v3.0

Updated: Dec 26' 05 to version 3, which fixes an obscure broken image bug, plus uses HTML syntax that validates.

Description: Image rollovers represent the classic and "timeless" JavaScript effect. Well, this DOM script makes the process of adding them as simple as can be, by allowing you to apply a rollover to any image through just the insertion of a class attribute inside the image's tag. Here's an example:

<img src="original.jpg" class="domroll hover.jpg" />

Viola. The above image instantly will swap between "original.jpg" and "hover.jpg" depending on your mouse state!

This script works in all DOM (Document Object Model) compliant browsers- IE5+, NS6+, Opera 6+, Mozilla etc. All other browsers will simply see no effect. And unlike conventional image rollovers, the image does not have to be hyperlinked in order for the effect to work.

Demo: Move your mouse over the following image:

Directions

Step 1: Insert the below script into the <BODY> section of your page, at the very end, after all content on the page:

Step 2: Download the external JavaScript file "chrisdomroll.js" (right click, and select "Save As"), and upload to your web server. You may need to change the "src" reference in the code of Step 1 above to correctly point to where you've uploaded this external JS file. And that's it! You're now ready to easily add a rollover effect to any image on the page.

Adding a image rollover effect to an image (written by author)

Now, here comes the special bit. For any image you want to add a rollover effect to, find it in the HTML. Once you've found it, make it hover like so:

<img src="original.jpg" class="domroll hover.jpg" />

Here, the original image is original.jpg. As you can see, simply insert the class attribute inside the image tag, where "domroll" doesn't change, and "hover.jpg" is the image you wish to rollover to when the mouse moves over the image. You need the space in between the two values.

If you find that your image already has a class attribute such as:

<img src="original.jpg" class="yellowBorder">

Don't worry. Just add the new bit at the end, still within the class attribute:

<img src="original.jpg" class="yellowBorder domroll hover.jpg">

You could even add the new bit at the beginning if you wanted. The script does the rest for you. And thats all you have to do! No messing with the JavaScript!