Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Dissolving Image Rollver
Description: A beefed up version of the classic rollover image, Roy's script adds a dissolving effect during image change in IE4+. The script works across all browsers, though as alluded to, only IE4+ will experience the added transition. Just for the uninitiated, a rollover image requires that you specify two images- one while the mouse is not over it, and one for when it is.
This script is in fact rather versatile in the kinds of effects it can render. While the default is "dissolving", 23 other transitions are supported as well, everything from "swipe in", "box out", to "fade in." Simply refer to the comments inside to alter the transition. Enjoy!
Demo: Move your mouse over the following images:
Step 1: Insert the below code into the <HEAD> section of your page:
You must configure the last portion of the script above, by entering the name of the participating images, plus paths to their onMouseover replacements.
Step 2: Now to the HTML code that renders the images. Insert the below example code into the <BODY> of your page, and take note of the extra attributes added to each image, plus the relationships between them. You will need to modify your image tags as such when customizing them:
That's a wrap. If you wish to download the images used in the demo above for testing purposes, here they are in a zip file.