Rollover Images July 18, 2008

Roll-over Images:

I saw the people who use front page or dreamweaver for rollover images. but if we write the code that takes very less code and maintenance also easy. here is the javascript code which perform the same thing i.e automatically change the images every 100 milli seconds.

1. Html Code:

   <img src=”images/1.png” id=”img” border=”0″>

2. Javascript:
   Create a new object called imgtime using Object function.
   imgtime.img=0;
   setTimeout(“img()”,100);

   function img()
   {
   var k= imgtime.img+1;

   if (k<6) <!–5 images max–>
   {
   imgtime.img=k;
   var imgsrc=”images/”+k+”.png”; <!– give the image name here–>
   document.getElementById(“img”).src=imgsrc;
   setTimeout(“img()”,100);
   }
   else
   repeatimg(); <!–reset–>
   }

   function repeatimg()
   {
   imgtime.img=0;
   img();
   }