DHTML image animation - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


DHTML image animation		[View Sample]

Enhances your image presentation with a smooth dynamic motion (fade-in-fade-out). Great to bring your images alive! Loads much faster than any gif-animations. Easy to configure.


Insert into <HEAD>
<script language=javaScript> <!-- Beginning of JavaScript - sandra0 = new Image(); sandra0.src = "sandraaa0.jpg"; sandra1 = new Image(); sandra1.src = "sandraaa1.jpg"; sandra2 = new Image(); sandra2.src = "sandraaa2.jpg"; var i_strngth=1 var i_image=0 var imageurl = new Array() imageurl[0] ="sandraaa0.jpg" imageurl[1] ="sandraaa1.jpg" imageurl[2] ="sandraaa2.jpg" function showimage() { if(document.all) { if (i_strngth <=110) { testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>"; i_strngth=i_strngth+10 var timer=setTimeout("showimage()",100) } else { clearTimeout(timer) var timer=setTimeout("hideimage()",1000) } } if(document.layers) { clearTimeout(timer) document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>") document.close() i_image++ if (i_image >= imageurl.length) {i_image=0} var timer=setTimeout("showimage()",2000) } } function hideimage() { if (i_strngth >=-10) { testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>"; i_strngth=i_strngth-10 var timer=setTimeout("hideimage()",100) } else { clearTimeout(timer) i_image++ if (i_image >= imageurl.length) {i_image=0} i_strngth=1 var timer=setTimeout("showimage()",500) } } // - End of JavaScript - --> </script>

Insert into <BODY>
<body bgcolor="#FFFFFF" onLoad="showimage()"> <div id="mainbod" style="position:absolute;visibility:visible;top:50px;left:360px;"> </div> <div id="testimage" style="position:absolute;visibility:visible;top:50px;left:40px"></div>

Other Options