Animation with setTimeout() Test Page

This simple animation cannot be started until after all the images/frames for the complete animation have been downloaded and are in cache. Then, when the mouse cursor enters the image area the animation begins. When the mouse moves out of the image area it stops. Here is the image followed by the source code and a step-by-step description of how it works:

<HTML>
<HEAD>
<TITLE>Animation with setTimeout() Test Page</TITLE>

<SCRIPT Language="JavaScript">
//Functions that do nothing so old browsers don't have problems
//These are redefined inside the next script tag where the language attribute
//is JavaScript1.1
function startAnimation(){}
function stopAnimation(){}
function changeImage(){}
function doNothing(){}
ready = false
</SCRIPT>

<SCRIPT Language="JavaScript1.1">
firstImg = 1
lastImg  = 9
nextImg = firstImg
timerID = 0
imgName = "test"
delay = 30

flipBook = new Array()
for (i=firstImg; i <= lastImg; i++){            //preload all images before entire page is visible.
   flipBook[i] = new Image()
   flipBook[i].src = "test" + i + ".jpg"    
}

function startAnimation(){
   if (ready){
     //nextImg = firstImg       //uncomment to start over at first image
     changeImage()
   }
}

function stopAnimation(){
   clearTimeout(timerID)
}

function changeImage(){
   document[imgName].src = flipBook[nextImg].src
   nextImg++
   if (nextImg > lastImg) nextImg = firstImg
   timerID = setTimeout("changeImage()",delay)
}

</SCRIPT>

</HEAD>

<BODY BGCOLOR="#ffffff" onLoad="ready=true">

<DIV align="center">
<A HREF="javascript:doNothing()" onMouseOut="stopAnimation()" 
      onMouseOver="startAnimation()">
<IMG SRC="test1.jpg" 
 height = "200"
 width = "200"
 border="0"
 name = "test"></A> 
</DIV>

</BODY>
</HTML>

Here is the file.

How This Works

The first SCRIPT tags contain a set of functions that do nothing. Older Javascript aware browsers that understand the onMouseOver event but do not implement the image object will call these functions. The next script tag contains the attribute Language="JavaScript1.1". Only browsers that support JavaScript 1.1 and the image object will compile the code that does the actual work inside the next set of Script tags. This includes functions (with the same names) that redefine these functions.

The precached image objects to be be displayed are stored in an array. A number of variables are used to keep track of the first image in the series the last image, and the next image to display. TimerID is used to stop an animation and imgName is the name of the actual visible image in the page. The value it is set to must match the name in the image tag.

flipBook is an array of image objects. The loop creates an image object for each image and then loads the image into cache by setting each image object's source to an appropriate file name. In this case the file names all are the same except for the frame number. Because only browsers that support the image object will execute code inside the <SCRIPT Language="JavaScript1.1"> it is not necessary to check the browser before using image object.

If the entire page (and all the images) have not been loaded ready should be false and the animation will not start if the this function is called. Otherwise this function call the changeImage() function to show the first image.

changeImage changes the image on the page to the next image in the flipBook array of image objects increments the nextImage variable to the next image and calls itself with a delay.

The ready value is set to true only after all the precached images are loaded - at least that is how it is supposed to work. Some browsers may behave differenetly.

When the mouse enters the the image area the anchor tags event handler (onMouseOver) will call startAnimation. When the cursor leaves the image/anchor area stopAnimation is called. The image is named "test" here which corresponds with the value of the imgName variable that is used to identify the image in the page to change. See the changeImage() function.

Simple Animation with setTimeout and Some Events

How This Works