Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • We Want to Hear from You!
  • Reader Services
  • Introduction
  • Part I: Getting Started
  • Hour 1. Understanding JavaScript
  • Hour 2. Creating a Simple Script
  • Hour 3. How JavaScript Programs Work
  • Part II: Learning JavaScript Basics
  • Hour 4. Using Functions and Variables
  • Hour 5. Using Strings and Arrays
  • Hour 6. Testing and Comparing Values
  • Hour 7. Repeating Yourself: Using Loops
  • Hour 8. Using Math and Date Functions
  • Part III: The Document Object Model (DOM)
  • Hour 9. Working with the Document Object Model
  • Hour 10. Responding to Events
  • Hour 11. Using Windows and Frames
  • Hour 12. Getting Data with Forms
  • Hour 13. Using Graphics and Animation
  • Part IV: Moving on to Advanced JavaScript Features
  • Hour 14. Creating Cross-Browser Scripts
  • Hour 15. Creating Custom Objects
  • Hour 16. Working with Sounds and Plug-Ins
  • Hour 17. Debugging JavaScript Applications
  • Part V: Working with Dynamic HTML (DHTML)
  • Hour 18. Working with Style Sheets
  • Hour 19. Using Dynamic HTML (DHTML)
  • Hour 20. Using Advanced DOM Features
  • Part VI: Putting It All Together
  • Hour 21. Improving a Web Page with JavaScript
    • Creating the HTML Document
    • Using Drop-Down Lists for Navigation
    • Adding Link Descriptions
    • Adding Graphic Links
    • Workshop: Finishing up the Page
    • Summary
    • Q&A
    • Quiz
    • Exercises
  • Hour 22. Creating a JavaScript Game
  • Hour 23. Creating DHTML Applications
  • Hour 24. JavaScript Tips and Tricks
  • Part VII: Appendices
  • Appendix A. Other JavaScript Resources
  • Appendix B. Tools for JavaScript Developers
  • Appendix C. Glossary
  • Appendix D. JavaScript Quick Reference
  • Appendix E. DOM Quick Reference

Adding Link Descriptions

Some users will undoubtedly prefer traditional hyperlinks to the navigation bar. To make these links more friendly, you can display descriptions of them on the status line when the user moves the mouse pointer over them.

You can accomplish this easily with onMouseOver event handlers. When the user moves the mouse over a link, this event will call a function to display the appropriate message on the status line. For example, the following HTML defines a link with a friendly status line:

<a HREF="order.html"
onMouseOver="window.status='Allows you to order products';return true"
onMouseOut="window.status=''">
Order form</a>

This sets the value of window.status to display the message. In addition, the true value is returned; this is necessary to override the normal action (displaying the URL) for the status line. The onMouseOut event handler clears the status line when the mouse pointer moves off the link.

The following shows the result of adding onMouseOver functions to the links in the original version of the FSC Software page. The page is shown in action in Figure 21.2, with the mouse pointer currently over the Spreadsheet link.

Figure 21.2 The HTML document with link descriptions.

<ul>
<li><a HREF="spread.html"
onMouseOver="window.status='Spreadsheet Information';return true"
onMouseOut="window.status=''">
Fictional Spreadsheet 7.0</a>
<li><a HREF="word.html"
onMouseOver="window.status='Word Processor Info';return true"
 onMouseOut="window.status=''">
Fictional Word Processor 6.0</a>
 <li><a HREF="data.html"
 onMouseOver="window.status='Database Information';return true"
  onMouseOut="window.status=''">
Fictional Database 7.0</a>
</ul>

Share This