|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Cross-Browser Animationby Dave Thau and Apple Developer Connection
The fundamental idea behind animation has been around for a long time: when a group of images are presented quickly, the series of images seems to form a single moving picture. One of the first examples of this effect was the thaumatrope, a gizmo created by Paul Roget in 1828. A thaumatrope is a disk with a pole or string attached so the disk can be twirled. Each side of the disk contains an illustration, and twirling the disk merges the two illustrations, making it seem that there's only one image. If the disk has a bird on one side and a cage on the other, twirling the disk gives the illusion that there's just one image: a bird in a cage.
Dynamic HTML (DHTML) provides a new range of ways to animate a page. DHTML can animate both text and images and animations can move throughout the browser window, instead of being anchored in one spot. Unfortunately, DHTML can be tricky because of differences between browsers.
This article will cover the basics of cross-browser animation. You'll learn how to animate text and images. Plus you'll see how to move HTML elements around the screen. After you've finished reading this article, you should be able to add cross-browser compatible DHTML animations to your web pages.
Many web pages make use of an image that resizes with a mouseover event. You can use this technique to make a button jump out or make a small image bigger and easier to see. Instead of using an animated gif, which can have a large file size, or using image swapping, which means preloading images, you can resize an image with DHTML
In IE4.0+ and NN 6.0+, resizing an image is quite simple. Change the
Netscape 4.0 doesn't let you change the
The first line writes the contents to the DIV. The second closes the document, which forces the sometimes-reticent Netscape to write your change to the Web page.
The lines above show you how to change an image from one size to another, but that's not really animation. If you want the image to slowly grow from one size to another, instead of changing in one big jump, you have to use a more animation-like technique.
Notice that I've set a variable called
Here's an example of a function that resizes an image and then calls itself using
The first two lines in the function resize the image in IE4+ and NN6+. The if-then statement sets a timeout to call the
Growing Across Browsers
The growing button demo contains some cross-browser compatibility code that's worth studying. Notice that I've put the image inside a DIV:
I did this because Netscape 4.0 does not allow dynamic resizing of images. In Netscape 4.0, I need to change the image by rewriting the contents of this DIV. Other browsers are easier to work with. You can simply change the
First the function checks to see what image-changing method it needs to use: changing the image size for W3C DOM compliant browsers and IE4+, or rewriting the DIV for Netscape 4. Browsers that comply with the W3C DOM (Netscape 6.0+, IE 5+) recognize the
will catch all browsers that let us resize the image. If the browser doesn't recognize
After the image size has been changed, the function checks to see if the image has become too big. If its