An animated rollover consists of 3 objects.
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 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.
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 :-
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
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.
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
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.
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()