Dissolving Image Rollver

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

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

Select All
<script type="text/javascript"> /***************************************** * Dissolving Image Rollover- By Roy Whittle (http://www.javascript-fx.com/) * Featured on/available at http://www.dynamicdrive.com/ * This notice must stay intact for use *****************************************/ //Generate transition CSS (transition=0 to 23) document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=12) }</STYLE>'); //Uncomment the next line for fading rollovers instead of dissolving: //document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.4) }</STYLE>'); var onImages=new Array(); function Rollover(imgName, imgSrc) { onImages[imgName] = new Image(); onImages[imgName].src = imgSrc; } function turnOn(imgName){ if(document.images[imgName].filters != null) document.images[imgName].filters[0].apply(); document.images[imgName].offSrc = document.images[imgName].src; document.images[imgName].src = onImages[imgName].src; if(document.images[imgName].filters != null) document.images[imgName].filters[0].play(); } function turnOff(imgName){ if(document.images[imgName].filters != null) document.images[imgName].filters[0].stop(); document.images[imgName].src = document.images[imgName].offSrc; } //Specify name of participating images, plus paths to their onMouseover replacements: Rollover("home", "home_on.gif"); Rollover("about", "about_on.gif"); Rollover("scripts", "scripts_on.gif"); </script>

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.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post