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 -->
<!-- The JavaScript Source!! http://javascript.internet.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 -->
<BODY>
<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 provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 2.49 KB -->