Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • Tell Us What You Think!
  • Put Your HTML Page Online Today
  • I. Your First Web Page
  • Hour 1. Understanding HTML and XML
  • Hour 2. Create a Web Page Right Now
  • Hour 3. Linking to Other Web Pages
  • Hour 4. Publishing Your HTML Pages
  • II. Web Page Text
  • Hour 5. Text Alignment and Lists
  • Hour 6. Text Formatting and Font Control
  • Hour 7. Email Links and Links Within a Page
  • Hour 8. Creating HTML Forms
  • III. Web Page Graphics
  • Hour 9. Creating Your Own Web Page Graphics
  • Hour 10. Putting Graphics on a Web Page
  • Hour 11. Custom Backgrounds and Colors
  • Hour 12. Creating Animated Graphics
  • IV. Web Page Design
  • Hour 13. Page Design and Layout
  • Hour 14. Graphical Links and Imagemaps
  • Hour 15. Advanced Layout with Tables
  • Hour 16. Using Style Sheets
  • V. Dynamic Web Pages
  • Hour 17. Embedding Multimedia in Web Pages
  • Hour 18. Interactive Pages with Applets and ActiveX
  • Hour 19. Web Page Scripting for Non-Programmers
  • Hour 20. Setting Pages in Motion with Dynamic HTML
    • Learning How to Fly
    • Dividing a Web Page into Layers
    • Offering Alternate Content in Plain HTML
    • Being Compatible with Incompatible Browsers
    • Moving a Layer Around with JavaScript
    • Interactive Layer Animation
    • Summary
    • Q&A
    • Workshop
  • VI. Building a Web Site
  • Hour 21. Multipage Layout with Frames
  • Hour 22. Organizing and Managing a Web Site
  • Hour 23. Helping People Find Your Web Pages
  • Hour 24. Planning for the Future of HTML
  • VII. Appendixes
  • A. Readers' Most Frequently Asked Questions
  • B. HTML Learning Resources on the Internet
  • C. Complete HTML 4 Quick Reference
  • D. HTML Character Entities

Interactive Layer Animation

The rest of this hour demonstrates another application of the slide function and shows you how Dynamic HTML can respond to user-initiated events. The goal this time is to modify the XYZ Files example page so that the user can click any of the three file tabs to "pull out" the hidden part of that graphic.

Figures 20.7 and 20.8 show an example: The user clicks the file tab marked X, and that image slides to the right. If the user clicked the tab again, it would slide back into its original location. You could achieve this interactive animation by adding the Dynamic HTML code in Figure 20.9 to the end of the page presented earlier (in Figure 20.3).

Figure 20.7 You can make layers respond to the user's actions. Here, the image of the X file slides out in response to a mouse click.

Figure 20.8 Notice here and in Figure 20.7 that the moving image stays in front of the text but behind the other two images as it slides.

Figure 20.9 Adding this to the end of the page in Figure 20.3 enables the interactive behavior shown in Figures 20.7 and 20.8.

The first <div> layer defined in Figure 20.9 enables the file tab marked X to display the behavior you see in Figures 20.7 and 20.8 (and which you can see on your computer screen by clicking the X tab).

<div style="position: absolute;
 left: 10px; top: 65px; z-index: 4">
<a href="#" OnClick="layername=makeName('layer1');
 yhop=0; ygoal=10; xhop=40; xgoal=70; slide()">
<img src="empty.gif" width="35" height="85" border="0" /></a></div>

This layer doesn't change the appearance of the page at all because it contains only a single image (empty.gif), which I made completely transparent before saving it in Paint Shop Pro. The <div style> tag positions this invisible image directly over the tab of the X file image, in order to give the user something to click. (It took some trial and error to find exactly the right spot, as well as the best width and height for the image. To make it easier, I left out the border=0 attribute of the <img /> tag, making a visible border around the image, until I had found the correct pixel coordinates for it.)

The OnClick attribute lets you specify some JavaScript to respond when the mouse clicks something. In future versions of JavaScript, you'll be able to put an OnClick, OnMouseOver, or OnMouseOut attribute in an <img /> tag, but for now that doesn't work, so you have to make the image a link and put the attribute in the <a> tag. In this case, I didn't want the link to actually go anywhere, so I just used href="#" to make a link to the top of the current page (a bit silly, but it works).

The JavaScript commands in the <a OnClick> attribute are very similar to those you saw earlier in the <body OnLoad> attribute. The makeName function is used to make a valid layer name; xgoal and ygoal are then set to the destination of the layer, while xhop and yhop are set to the size of each hop on the way there. (Notice that yhop is 0 and ygoal is the same as the initial top: setting, since the image only moves horizontally.) Finally, slide is called on to do the actual animation.

The second <div> layer in Figure 20.9 is almost the same, but is located 320 pixels further to the right. The xgoal is also 320 pixels further to the left, and xhop is -40 instead of 40. This gives the user a place to click to put away the file folder image after it has been pulled out.

The remaining four <div> layers provide exactly the same interactive behavior for the file tabs marked Y and Z.

Share This