HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [181]
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.
♦ The sprite div has a local style. JavaScript animation requires a locally defined style.
♦ The sprite div has absolute positioning. Because I’ll be moving this thing around on the screen, it makes sense that it’s absolutely positioned.
♦ The code and CSS are as modular as possible. Things can get a little complicated when you start animating things, so throughout this chapter, I simplify as much as I can. The CSS styles are defined externally, and the JavaScript code is also imported.
♦ Code is designed to be reused. Many programs in this chapter are very similar to each other. To save effort, I’ve designed things so that I don’t have to rewrite code if possible.
Looking over the HTML
The HTML code for this program provides the basic foundation:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
type = ”text/css”
href = ”movement.css” />
Click buttons to move ball
style = ”position: absolute;
top: 100px;
left: 100px;
height: 25px;
width: 25px;” >
alt = “ball” />
x = 100, y = 100
You should notice a few interesting things about this code:
♦ It has an external style sheet. Most of the CSS (the stuff that defines the surface and the forms) is moved off-stage into an external style sheet. You have to define some CSS locally, but anything that can be moved away is in another file.
type = “text/css”
href = “movement.css” />
♦ The JavaScript is also outsourced. The script tag has a src attribute, which you can use to load JavaScript code from an external file. The browser loads the specified file and reads it as if it were directly in the code. (Note: External scripts still require a tag.) This program gets its scripts from a file called movement.js.
♦ The body tag calls a method. In animation (and other advanced JavaScript), you commonly have some code you want to run right away. The body has an onload event. You can feed it the name of a function (just like you do with a button’s onclick event). In this case, I want the function called init() to run as soon as the body finishes loading into the computer’s memory.
♦ The yellow box is a div called surface. It isn’t absolutely necessary, but when you have something moving around on the screen, you want some kind of boundary so that the user knows where she can move.
♦ A sprite div appears inside surface. This sprite is the thing that actually moves around.
style = “position: