©ilj@flowsim.se JavaScript code samples 30 JavaScript animation >>> this example in Swedish
	Two pictures - one red and one white - shown at different places. STOP IT!
	Images and text are put in different columns (TD) in a table (TABLE). You could also use a stylesheet.
Put the script within SCRIPT tags in the HEAD portion of the document (see MINIMANUAL 1 basics):   if(document.images) //1 { i = 0 //2 j = 0 iljcalled = 0 //3 bild = new Array() bild[1]= new Image() bild[2]= new Image() bild[1].src= "picture file (here:the red circle)" bild[2].src= "picture file" }   function test() { if(document.images) //4 { if(iljcalled == 0) //5 { iljanim() //6 iljcalled = 1 //7 } } }   function iljanim() { document.images[i].src = bild[1].src //8 if(i>3) //9 { document.images[i-4].src = bild[2].src //10 } iljtimer = setTimeout("iljanim()",250) //11 i++ //12 if(i==27) //13 { i=0 //14 j=j+1 } if(j==5) //15 { clearTimeout(iljtimer) //16 } }   1 if the browser is capable of switching images the code within curly brackets will be executed, i e some variables will be defined and the images will be loaded   2 i is used to keep track of where to show the picture   3 iljcalled is used to make sure that that the animation is started only once (if you were to use a link to start it)   4 this line checks if itīs OK to switch images; if thatīs so and...   5 if the function hasnīt been called yet then...   6 iljanim() is called and...   7 iljcalled takes the value of 1, making further calling of the function impossible   8 the first image you put on a page using the IMG tag is document.images[0], the second document.images[1] etc. This line, then, shows the red circle first at the place document.images[0], then at document.images[1]etc. i is increased by 1 each time the function iljanim() is called   9 when i is greater than 3 and thus four round circles are seen then...   10 the last red circle is replaced by the white, invisible picture   11 this is where the function iljanim() calls itself every 250/1000 seconds   12 i is increased by 1   13 when i equals 27 (a number that of course has to be adjusted according to the number of pictures you use and the time you want to elapse before restarting) then...   14 i takes the value of 0 and everything starts all over again   15 when j equals 5, i e after 5 "restarts", then...   16 the timer is stopped   If you want the animation to start as soon as the page has loaded you can put the starting call after BODY ONLOAD, like this   BODY ONLOAD="test()"   OTHER JAVASCRiPT EXAMPLES   How to use javascript to choose what image to show by selecting it in an option list How to use javascript to switch images How to use javascript to switch images onmouseover JavaScript getDay() and document.write JavaScript date JavaScript timer How to use javascript to switch images onmouseover JavaScript timer JavaScript onmouseover JavaScript lastModified JavaScript/ text in text area JavaScript/ text in text area how to open new windows in JavaScript JavaScript clock JavaScript confirm JavaScript alert JavaScript prompt JavaScript onmouseover JavaScript onmouseover2 JavaScript animation   Page by     ilj@flowsim.se     Last modified: January 15, 1998   This page should be part of a frames system at: http://www.flowsim.se