ave you ever seen those Web pages where elements animate along a path, moving across a background like sprites? It’s fairly easy to imagine how that’s done?using the window.setTimeout function to move one or more elements along a path defined with X and Y pixel values stored in an array. But it’s difficult and time-consuming to create the path. The problem is: How can you create a path animation using a Web interface?



You could use Flash, but DHTML gives you pixel-level control over the placement of each element on the page?and you aren’t bound by the rectangle of a Flash movie. You can even build a simple tool that lets you draw an animation path using the mouse. The animations themselves will work in all three major browsers?Internet Explorer 4+ (IE4+), Netscape Navigator 4.x (NN4), and Netscape 6 (NN6)?without any plug-in support, although currently, the tool runs only in IE4+ and NN4+.Path Animation
A path animation is exactly what you’d expect: an element on the page follows a path that you design. In DHTML terms, you rapidly change the top and left properties of a visible object to achieve the appearance of motion. To do that, you can store a series of values for the top and left properties in arrays, and then use the window.setTimeout function to cycle through the values in the arrays.

Here’s a simple example of a path animation. Open your favorite text editor and enter the following code: