HTML, XHTML, & CSS All-in-One For Dummies®, 2nd Edition

Chapter 7. Animating Your Pages

In This Chapter

• Moving an object on the screen

• Responding to keyboard input

• Reading mouse input

• Running code repeatedly

• Bouncing off the walls

• Swapping images

• Preloading image files

• Reusing code

• Using external script files

JavaScript has a serious side, but it can be a lot of fun, too. You can easily use JavaScript to make things move, animate, and wiggle. In this chapter, you find out how to make your pages dance. Even if you aren't interested in animation, you can discover important ideas about how to design your pages and code more efficiently.

Making Things Move

You may think you need Flash or Java to put animation in your pages, but that's not the only way. You can use JavaScript to create some pretty interesting motion effects. Take a look at Figure 7-1.

Tip

Because this chapter is about animation, most of the pages feature motion. You really must see these pages in your browser to get the effect because a static screen shot can't really do any of these programs justice.

The general structure of this page provides a foundation for other kinds of animation:

• The HTML is pretty simple. The page really doesn't require much HTML code. It's a couple of divs and some buttons.

• The ball is in a special div called sprite. Game developers call the little images that move around on the screen sprites, so I use the same term.

  

  Figure 7.1. Click the buttons and the ball moves ...