In this hour, you see how to combine HTML, style sheets (see Hour 15), and JavaScript (see Hour 18) to animate independent layers of text and graphics. You learn how to initiate an animation when a page first loads, or in response to a mouse click on any region of the page. If you have any experience with computer programming, you can probably glean enough from this hour and the previous one to start writing your own JavaScript enhancements to your pages. And even if you have never written a line of computer-language code before in your life, you can still copy the code in the examples and use it on your own pages.
(View HTML tags covered in Hours 18 and 19.)
The XYZ Files(Figures 19.1 - 19.10)
To transfer this example to your hard drive, right-click (Mac users hold down the mouse button) on each of the following seven links, selecting Save Link As from the pop-up menu. Save all seven files in the same folder.
The answer to Quiz question #1 in the book. This page uses the same slide.js script as the XYZ Files page. You can easily use slide.js to create layer animation in your own pages by carefully examining and following the example code in this page.
"If you've done any programming in other languages, it may seem strange to you that there aren't any explicit commands in these JavaScript examples to draw anything on the screen. JavaScript takes care of updating the display automatically as soon as you change the position settings for anything on the Web page."
Take a Dive
