Javascript Image Animator

The purpose of this script is to animate an image in a HTML page similar to an animated GIFs. It is useful if an animated gif cannot be used because of bad compression (for example, a series of photos may be of moderate size as single JPEGs, but very large in form of a GIF), because of quality (GIFs are limited to 256 colors), or for some other reason (if you are a GIF-hater).

Given its object-oriented nature, it is very simple to use and it works nicely with multiple independent images to animate.

Documentation

The following example should be self-explanatory. The interval does not necessarily have to be set, and defaults to 5000 ms.

Additionally, there's an attribute prefix, which will be prepended to the URLs of all images if you set it before calling add(). It is useful if you have many images in the same directory, and don't want to repeat the directory all the time.

Example

Put an unique ID in the image tag of the image you want to animate:

<img id="image_to_animate" alt="an animated image"
    src="some_image.png">

Include the script in your HTML page as follows:

<script type="text/javascript" lang="javascript" 
    src="animator.js"></script>

Write a function (best inlined into the HTML) to create, add images to, and run the animator:

<script type="text/javascript" lang="javascript">
function animate() {
    animator = new Animator("image_to_animate");
    animator.interval = 2000;
    animator.add("image1.png");
    animator.add("image2.png");
    animator.add("image3.png");
    animator.run();
}
</script>

Start the animator in the body onload tag:

<body onload="animate();">

Browser Compatibility

I successfully tested the script on the following browsers:

Mozilla Firefox 0.8 and up (I didn't test earlier versions).
Mozilla 1.02 and up (I didn't test earlier versions).
Opera 5, 6 and 7. It doesn't work on Opera 3.62 and earlier; I didn't test Opera 4.
Internet Explorer 4, 5 and 6 on Windows (I didn't test earlier versions).
Safari 1.2; I didn't test any earlier versions, but I'm quite sure it works there, too.

Netscape 4.77 (earlier versions probably too, but I didn't test them) is just hopeless, and I'm not going to support it. I adapted the script so that it doesn't generate an error, but it doesn't do anything else either.

If the script happens to work or not work on some other browser, I'd be glad if you told me so I can complete this list.

Demo

Have a look at the demo page to see the script in action.

Download

Download: animator.js.