JavaScript code samples 18
JavaScript animation
>>> this example in Swedish
start!
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
anropad = 0//1
function iljtest()
{
if((anropad == 0) && (document.images))
{
iljimage()
anropad = 1
}
}
if(document.images)
{
i = 0//2
j = 0//3
bild = new Array()
bild[0]= new Image()
bild[1]= new Image()
bild[2]= new Image()
bild[0].src= "first image file"
bild[1].src= "second image file"
bild[2].src= " third image file"
}
function iljimage()
{
document.iljbild.src = bild[i].src//4
iljtimer = setTimeout("iljimage()",500)//5
i++//6
if(i==bild.length)//7
{
i=0
j=j+1//8
}
if(j==50)//9
{
clearTimeout(iljtimer)//10
anropad = 0
j=0
}
}
//-->
</SCRIPT>
<IMG NAME = "iljbild" 4
SRC= "first image file"WIDTH = "pixel"HEIGHT = "pixel"><A HREF = "URL"
onMouseOver = "iljtest()"> 11
START </A>
1 anropad is here set to 0 thus making it possible to call the timer function; once the function has been called anropad will be set to 1, making further calling impossible
2 i is used to keep track of which picture to show
3 j is used to keep track of how many times the animation has restarted from the first picture
4 name the picture
In more recent browsers you can use ID instead of NAME and change the code line document.iljbild.src = bild[i].src to:
document.getElementById('iljbild').src = bild[i].src
5 milliseconds - how often (or rather, after how long time) the function is called (i e how often the pictures are switched and thus how quickly the figure "moves")
6 i is increased by 1
7 this number has to be changed according to the number of pictures you use, this is where the animation starts all over again
8 each time the animation restarts from the first picture j is increased by 1
9 when j equals 50 then...
10 the timer is stopped and j and iljcalled are reset to 0, thus making it possible to once again start the animation by moving the mouse pointer over the link
11 this is where the function iljtest() is called
Donīt forget to remove the footnotes if you copy the code!
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 JavaScript animation
Page by
ilj@flowsim.se
Last modified: June 7, 1997
This page should be part of a frames system
at:
http://www.flowsim.se
JAVASCRiPT