Fade Roll-over
copy-paste
<p><center> <font face="arial, helvetica" size"-2">Free JavaScripts <br> by <a href="http://www.magnadevelopment.com">MagnaDevelopment</a></font> </center><p> <!-- TWO STEPS TO INSTALL FADING ROLLOVER: 1. Copy the coding into the HEAD of your HTML document 2. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- This script and many more are available free online at --> <!-- MagnaDevelopment at www.magnadevelopment.com.com --> <!-- Begin var maximages = 6; // how many fade images do you have? var fadespeed = 125; // fade frame time in milliseconds; 125 = 125 ms var fadeintimer; var fadeouttimer; var fadeincount = 0; var fadeoutcount = maximages-1; var fadearray = new Array(maximages); // enter all the fade images here // the first item should be 0, then numbered through 1 less than your maximages fadearray[0] = "http://javascript.internet.com/img/fading-rollover/fade00.jpg"; fadearray[1] = "http://javascript.internet.com/img/fading-rollover/fade01.jpg"; fadearray[2] = "http://javascript.internet.com/img/fading-rollover/fade02.jpg"; fadearray[3] = "http://javascript.internet.com/img/fading-rollover/fade03.jpg"; fadearray[4] = "http://javascript.internet.com/img/fading-rollover/fade04.jpg"; fadearray[5] = "http://javascript.internet.com/img/fading-rollover/fade05.jpg"; for (var i = 0; i < maximages; i++) { eval('pic' + i + ' = new Image();'); eval('pic' + i + '.src = fadearray[i];'); // preloads fade images } function fade_in() { clearTimeout(fadeouttimer); document.images['fade-pic'].src = fadearray[fadeincount]; if (fadeincount != maximages-1) { fadeincount++; fadeintimer = setTimeout('fade_in()', fadespeed); } else { clearTimeout(fadeintimer); fadeincount = 0; } } function fade_out() { clearTimeout(fadeintimer); document.images['fade-pic'].src = fadearray[fadeoutcount]; if (fadeoutcount != 0) { fadeoutcount--; fadeouttimer = setTimeout('fade_out()', fadespeed); } else { clearTimeout(fadeouttimer); fadeoutcount = maximages-1; } } // End --> </script> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <center> <a href="http://javascriptsource.com" onmouseover="fade_in()" onmouseout="fade_out()"> <img src="http://javascript.internet.com/img/fading-rollover/icontop.gif" border=0><br> <img name="fade-pic" height=56 width=300 border=0 src="http://javascript.internet.com/img/fading-rollover/fade00.jpg"><br> <img src="http://javascript.internet.com/img/fading-rollover/iconbtm.gif" border=0><br></a> </center> <p><center> <font face="arial, helvetica" size="-2">Free JavaScripts<br> by <a href="http://www.magnadevelopment.com">MagnaDevelopment</a></font> </center><p> <!-- Script Size: 2.49 KB -->
