Image Fader
copy-paste
<!-- TWO STEPS TO INSTALL IMAGE FADER TRANSITION: 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> <style type="text/css"> #img1 {position:absolute; width:300px; height:100px; left:220px; top:525px; z-index:1; visibility:hidden;} #img2 {position:absolute; width:300px; height:100px; left:220px; top:525px; z-index:2} </style> <SCRIPT LANGUAGE="JavaScript"> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin /************************************************************************ Script made by Martial Boissonneault © 2001 http://getElementById.com/ This script may be used and changed freely as long as this msg is intact Visit http://getElementById.com/ for more free scripts and tutorials. *************************************************************************/ var ie5=(document.getElementById && document.all); var ns6=(document.getElementById && !document.all); nPlus = 5 //the % of fading for each step speed = 50 //the speed // You don't have to edit below this line nOpac = 100 function FadeImg(){ if(document.getElementById){ document.getElementById('img1').style.visibility="visible"; imgs = document.getElementById('img2'); opacity = nOpac+nPlus; nOpac = opacity; setTimeout('FadeImg()',speed); if(opacity>100 || opacity<0){ nPlus=-nPlus; } if(ie5){ imgs.style.filter="alpha(opacity=0)"; imgs.filters.alpha.opacity = opacity; } if(ns6){ imgs.style.MozOpacity = 0 + '%'; imgs.style.MozOpacity = opacity + '%'; } } } onload=FadeImg; // End --> </script> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <div id="img1"> <img src="../../../../img/img1.gif" border=0 width=300 height=100> </div> <div id="img2"> <img src="../../../../img/img2.gif" border=0 width=300 height=100> </div> <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.21 KB -->
