JavaScript code samples 30
JavaScript animation
>>> this example in Swedish


Two pictures - one red and one white - shown at different places.

  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
j = 0
iljcalled = 0
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(iljcalled == 0)
iljcalled = 1
function iljanim()
document.images[i].src = bild[1].src
document.images[i-4].src = bild[2].src
iljtimer = setTimeout("iljanim()",250)
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
i is used to keep track of where to show the picture
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...
iljanim() is called and...
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
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...
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()"


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

Last modified: January 15, 1998
This page should be part of a frames system