Animating images with Javascript

Warning: This is a really stupid web design trick. You are almost always better off using an animated GIF instead of relying on the browser to animate your image for you. The only excuse that makes this even marginally acceptable is that you might need the partial alpha transparency PNGs afford.

That said, it's really easy to create animations with Javascript's setInterval command:

<script type="text/javascript"><!-- setInterval(function() {animate('myElement');}, 1000); // change frames every 1000 ms function animate(id) { var elem = document.getElementById(id); var img = elem.style.backgroundImage; if (img == null) return; if (img.indexOf('images/image2.png') != -1) { elem.style.backgroundImage = 'url(images/image1.png)'; } else { elem.style.backgroundImage = 'url(images/image2.png)'; } } --></script>

The preceding example will animate the background image of the element with the ID "myElem."

Again, I don't recommend using this without a good reason. So here it is; take it with a grain of salt.