Multimedia Rollovers

Multimedia (Fading) Rollovers
Brought to you by...

(Move your mouse over the images to the left)
Home | Scripts | ScriptClips | Forum

Installation Directions:
1) Open up your webpage document in Notepad
2) Right click in the text area below and select "copy"
3) Right click in Notepad and "Paste" this code into the <head> section

<script type="text/javascript">
/**
  * You may use this code for free on any web page provided that 
  * these comment lines and the following credit remain in the code.
  * "Multimedia Rollovers" from http://www.javascript-fx.com
  */
//Uncomment the next line for random transition rollover each time the page is loaded
//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=1, transition='+Math.floor(Math.random()*23)+') }</STYLE>');

//Uncomment the next line for a specific transition rollover (transition=0 to 23)
//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=1,transition=2) }</STYLE>');

//Uncomment the next line for fading rollovers
document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=1) }</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)
		if(document.images[imgName].filters[0].status != 0)
			document.images[imgName].filters[0].stop();
	document.images[imgName].offSrc = document.images[imgName].src;
	document.images[imgName].src    = onImages[imgName].src;
} 
function turnOff(imgName) 
{ 
	if(document.images[imgName].filters != null)
		document.images[imgName].filters[0].apply();
	document.images[imgName].src = document.images[imgName].offSrc;
	if(document.images[imgName].filters != null)
		document.images[imgName].filters[0].play();
} 
Rollover("home",    "images/home_on.gif");
Rollover("about",   "images/about_on.gif");
Rollover("forums",  "images/forums_on.gif");
Rollover("contact", "images/contact_on.gif");
Rollover("scripts", "images/scripts_on.gif");
</script>

4) Right click on the text area below and select "copy"
5) Right click in Notepad and "paste" this code into
the BODY of your document where you want the rollover image to appear. 6) Customization :-
- Add as many images as you want - change the name "home" to the name of your rollover
- make sure you that if you add a new rollover you create a Rollover for it in the HEAD section.

Rollover("myRollover", "images/myImage.gif");

(See the source code for more details)