New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


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:





Directions Developer's View

Step 1: Insert the below code into the <HEAD> section of your page:

Select All

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:

Select All

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.