First, you will need to draw the individual images that will become the animation:
- 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.
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.