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
    • Interactive Highlighting
    • Preloading Images for Speed
    • Adding Up an Order Form
    • The Wide World of JavaScript
    • Summary
    • Q&A
    • Workshop
  • Hour 20. Setting Pages in Motion with Dynamic HTML
  • 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 Highlighting

If you've used any graphical CD-ROM software application, you have probably seen buttons that light up or change when your mouse passes over them. This looks cool and gives you some visual feedback before you click something, which research shows can reduce confusion and errors.

You can add the same sort of visual feedback to the links on your Web pages, too. The first step toward achieving that effect is to create the graphics for both the dark and the lit icons. Figure 19.1 shows some pumpkin faces I created in Paint Shop Pro. I made two copies of each pumpkin: one darkened and one illuminated as if it had a candle inside.

Figure 19.1 Four graphics images, each with a highlighted version to replace it when the mouse points to it.

Here's how the HTML for a graphical link would look before any scripting is added. This should all look easy and familiar to you. (If it doesn't, review Hour 10, "Putting Graphics on a Web Page," and Hour 13, "Page Design and Layout." )

<a href="erica.htm"><img src="ercadark.jpg"
 width=98 height=214 border=0 alt="erica" /></a>

The first thing you need to do is give this particular <img> tag its own name. You'll use this name to refer to this specific spot on the page when you want to change which image is displayed in that spot. We'll name this spot erica by putting a name attribute in the <img> tag:

<a href="erica.htm"><img name="erica" src="ercadark.jpg"
 width=98 height=214 border=0 alt="erica" /></a>

Now for the magic part: You can add JavaScript commands to any link on a Web page by including two special attributes called OnMouseOver and OnMouseOut. With OnMouseOver, you tell the Web browser what to do when the mouse passes over any text or images within that link. With OnMouseOut, you indicate what to do when the mouse moves out of the link area.

In this case, you want the image to change to ercalite.jpg when the mouse passes over the corresponding link and change back to ercadark.jpg when the mouse moves away.

Here's what that looks like in HTML and JavaScript:

<a href="erica.htm" OnMouseOver="erica.src='ercalite.jpg'"
OnMouseOut="erica.src='ercadark.jpg'"><img name="erica"
src="ercadark.jpg" width=98 height=214 border=0 alt="erica" /></a>

Notice that you need to enclose the name of the image file in single quotation marks (apostrophes), but the whole JavaScript command gets enclosed by double quotation marks (inch marks).

When you do this on your Web pages, just follow my example closely, substituting your own image names and graphics files.

Figure 19.2 shows the complete HTML for a Web page using the pumpkin images as links. You can see how the pumpkins light up when the mouse passes over them in Figures 19.3 and 19.4, or online at http://24hourHTMLcafe.com/hour19.

Figure 19.2 This is the JavaScript-enhanced HTML for the page shown in Figures 19.3 and 19.4.

Figure 19.3 When the mouse passes over the pumpkin with my daughter's face, it lights up and her name (from the alt attribute) appears.

Figure 19.4 When you move the mouse to my pumpkin, my face lights up instead of Erica's.

You will usually want the image that the mouse is passing over to light up or change, but you aren't limited to doing it that way. For example, if you wanted all the pumpkins to light up whenever the mouse moved over one of them, you could put the following JavaScript in each <a> tag:

<a href="erica.htm" OnMouseOver="erica.src='ercalite.jpg';
dick.src='dicklite.jpg'; jan.src='janlite.jpg'; ona.src='onalite.jpg'"
OnMouseOut="erica.src='ercadark.jpg'";
dick.src='dickdark.jpg'; jan.src='jandark.jpg'; ona.src='onadark.jpg'">

As you can see, modifying multiple images is as simple as putting a semicolon (;) after the first JavaScript command and following it with another command. You can put as many commands as you need in the same OnMouseOver (or OnMouseOut) attribute, as long as you separate them with semicolons.

Share This