Animation
along the way of JavaScript

We'll mention two methods for GIF animation: The first has nothing to do with JavaScript and will work with any Browser. The second uses JavaScript, but will only work in Browsers [Netscape 3.0 and Netscape 4.0] that support document.images[...].src [a JavaScript feature that allows you to update images without refreshing the whole page].

The GIF Animation method
Unknown to many of us, a GIF can contain multiple images and a control code that allows it to be animated by your Browser unassisted by any script. One program that does this is The GIF ConstructionSet from Alchemy Mindworks. Another is the Microsoft GIF Animator available with their graphic software or at the Microsoft Web Site. Other GIF animators are available through Shareware.COM [including the freeware GifBuilder for the MacIntosh]. The 'Weeping Willow' in the heading of this page was built using this technique.

JavaScript Animation with document.images[...].src
First, you will need to draw the individual images that will become the animation:

The Individual Images

The document.images[...] array in Netscape 3.0 and 4.0 is an array of all the images in the document. The src property lets you get or set the image that is displayed. So document.images[...].src = "new.gif" changes the image. Using a timer, the image can be animated. It is shown here with buttons that let you set the interval [in milliseconds] between image changes to get the 'feel' of animation timing.:

Remember ... use restraint with animations. They can drive people away from your site!

Note: See the trick in the tutorial about controls. The images must be preloaded. As they are demonstrated already on this page, the trick was unnecessary.


Also: