pic

Enter Animation Speed: (Fast, Medium, Slow)

Display animation

The Source Code

Note that I have included an alert statement to show you the value of the variable howfast. alert is a good tool for debugging your programs. Seeing variable contents, will often help show you where the program is not behaving as expected.

Be careful to notice the "sp" inside the startshow() function. That's what allows the data to be taken from what the user writes to the function itself.

Also notice the toUpperCase() method. By using this, values "slow", "Slow", "sLOW" will all be processed as SLOW. Neat trick, yes?

Here's the code:

<html>
<head>
<SCRIPT type="text/javascript">
    num=1
    img1 = new Image ()
    img1.src = "pic1.gif"
    img2 = new Image ()
    img2.src = "pic2.gif"
    img3 = new Image ()
    img3.src = "pic3.gif"  
    function startshow(sp)
    {
       howfast=1600
       if (sp.toUpperCase() == "SLOW")
         {howfast=2400}
       if(sp.toUpperCase() == "FAST")
         {howfast=800}
       alert(howfast)
       for (i=1; i<21; i=i+1)
          {document.mypic.src=eval("img"+num+".src")
           for(x=1; x<howfast; x=x+1)
             {}
           num=num+1
           if(num==4)
              {num=1}
           }
           document.mypic.src=img1.src
    }
</script>
</head>
<body>
<center>
<form name="myform">
<img src="pic1.gif" name="mypic" border=0>
<p>
Enter Animation Speed: (Fast, Medium, Slow) 
<input type="text" value="Medium" name="speed">
<p>
<a href=
 "JavaScript:startshow(document.myform.speed.value)"
>Display animation</a> 
</center>
</form>
</body>
</html>

 

Close this window to return to Primer #28