An animated rollover consists of 3 objects.

a document image

The AnimationFrames object, when created, simply holds the images that make up the animation. For example

AnimationFrames("home_ani", 5, ".gif");

Will create a 5 frame AnimationFrames object. The location for the images will be relative to the HTML document in which it was created. The default for this is :-


The document image is where the frames of the animation will be displayed. The document image is like any other image but MUST be named in order to associate it with an AnimatedImage object. For example

<IMG SRC="images/home_ani/0.gif NAME="home_img">

The AnimatedImage object ties the AnimationFrames object and the image objects together.

AnimatedImage("home_img", "home_ani");

The AnimatedImage objects holds all the information about the animated rollover such as the current frame number and the OPENING/CLOSING state. The first parameter in the call to AnimatedImage MUST match an image defined in the document. If it does not an alert will pop up and display an error message.

You can think of the AnimatedImage object as a VCR. The document image is the TV screen to which the VCR is connected to (which must exist and never changes) and the AnimationFrames object is a video cassette that can be played in any AnimatedImage object.

The TV/VCR combo.
Most of the time you will find an Animated Rollover is made up of just an AnimationFrames and an AnimatedImage object. For this situation there are two helper functions. AnimatedGif() and AnimatedJpg(). These look like object constructors and you can think of them as creating an object of that type. However, behind the scenes, they are constructing two objects. An example use for this would be.

AnimatedGif("home", 5);

for which we would need the document image:-

<IMG SRC="images/home/0.gif" NAME="home">

which would require the following images

The above AnimatedGif() call is equivalent to the following 2 lines of code :-

AnimationFrames("home", 5, ".gif");
AnimatedImage("home", "home");

You might be wondering why an Animated Rollover needs an AnimationFrames object and an AnimatedImage object. Well condisder the following; suppose you want to have 4 doors that open when you mouse over them. The doors will be named door1, door2, door3, door4. Suppose the images are made up of gifs. You might think they would be defined

AnimatedGif("door1", 10);
AnimatedGif("door2", 10);
AnimatedGif("door3", 10);
AnimatedGif("door4", 10);

The problem with this is you would need the following images.

Now, if the animation is different for each door then this is correct, but if the animation is the same for each door then this is a waste because you will be downloading the same images 4 times.
E.g. door1/0.gif = door2/0/gif = door3/0.gif = door4/0.gif.

What you want to be able to do is define the animation just once, and then use the animation in 4 different places. This is why the AnimationFrames and AnimatedImage object are seperate. The correct way to implement the doors is

AnimationFrames("door", 10, ".gif");
AnimatedImage("door1", "door") ;
AnimatedImage("door2", "door");
AnimatedImage("door3", "door");
AnimatedImage("door4", "door");

Now you will have 4 doors that will open using the same animation but we have downloaded only 10 frames of animation instead of 40.

The images in the document would need to be defined as follows.

<IMG SRC="images/door/0.gif" NAME="door1">
<IMG SRC="images/door/0.gif" NAME="door2">
<IMG SRC="images/door/0.gif" NAME="door3">
<IMG SRC="images/door/0.gif" NAME="door4">

Notice that ths SRC of eech of the 4 images is the same, it is the first frame of the animated door. The NAME of the images match the name defined in the call to AnimatedImage()