© ilj@flowsim.se
JavaScript code samples
JavaScript animation
>>> this example in Swedish

code & explanations further down

 
 
 
 
 
 
 
 
 
 
 
 

 
:
 

<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
if(document.all || document.layers || document.getElementById)
//the images used in the animation are preloaded
{
bild=new Array()
bild[0] = new Image()
bild[0].src='bildfil1'
bild[1] = new Image()
bild[1].src='bildfil2'
bild[2] = new Image()
bild[2].src='bildfil3'
bild[3] = new Image()
bild[3].src='bildfil4'
//etc
}
i=0
maxvarv=0
// i keeps track of what image to display
// maxvarv keeps track of
//how many times the animation moves across the page
 
//funktionen startingup() //kollar vilken webbläsare
//anrop:BODY ONLOAD=startingup()
 
function startingup()
{
if(document.all) //MSIE4+
{min_bit=document.all['flyttbit']}
if(document.getElementById) //w3
{min_bit=document.getElementById('flyttbit')}
 
 //the function iljmove
//moves the layer and switches the images
 function iljmove()
{
if ((document.getElementById&&maxvarv<3) || (document.all&&maxvarv<3))
{
min_bit.style.left=parseInt(min_bit.style.left)-35+"px"
setTimeout("iljmove()",250)
document.iljbild.src=bild[i].src
i++
if(i==bild.length){i=0}
if(parseInt(min_bit.style.left)<-160)
{
min_bit.style.left=340+"px"
maxvarv++
}
}

if(document.layers && maxvarv<3)
{
document.flyttbit.moveBy(-35,0)
setTimeout("iljmove()",250)
document.layers[0].document.iljbild.src=bild[i].src
i++
if(i==bild.length){i=0}
if(document.flyttbit.left<-160)
{
document.flyttbit.left=340+"px"
maxvarv++
}
}
}
//-->
</SCRIPT>
 
The HTML tags for the animation.
 
<DIV ID="flyttbit"
STYLE="position:absolute; left:-33px; top:200px;">
<IMG SRC="bildfil"NAME="iljbild" WIDTH="pixel" HEIGHT="pixel">
</DIV>
 
 
 
How to find out the width of a window? Have a look at JavaScript 48.
 
 

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
 
ilj@flowsim.se
 

 
Last updated 30 april 2004.
www.flowsim.se
JavaScript