Sams Teach Yourself JavaScript in 24 Hours
- 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
- 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
Creating Rollovers
The most common use of JavaScript's dynamic image feature is to create rollovers, which are images that change when you move the mouse pointer over them.
Rollovers are usually used for images that are links. Using this feature, you can highlight the current link with a different color or a border, or even by changing the image entirely.
You can turn an image into a rollover by adding an onMouseOver event handler that replaces the image with a highlighted version and an onMouseOut handler that returns the original image. Listing 13.2 shows an example that uses four images as rollovers.
Example 13.2. An example of rollovers
<html> <head> <title>Roll Over, Spot. Good Dog.</title> </head> <body> <h1>An Example of Rollovers</h1> <hr> The images below will change when you move the mouse over them. <p> <a href="home.html" onMouseOver="document.images[0].src='home1.gif'" onMouseOut="document.images[0].src='home.gif'"> <img src="home.gif" width=192 height=47 alt="" border="0"> </a> <br> <a href="links.html" onMouseOver="document.images[1].src='links1.gif'" onMouseOut="document.images[1].src='links.gif'"> <img src="links.gif" width=93 height=42 alt="" border="0"> </a> <br> <a href="guest.html" onMouseOver="document.images[2].src='guest1.gif'" onMouseOut="document.images[2].src='guest.gif'"> <img src="guest.gif" width=195 height=42 alt="" border="0"> </a> <br> <a href="email.html" onMouseOver="document.images[3].src='email1.gif'" onMouseOut="document.images[3].src='email.gif'"> <img src="email.gif" width=185 height=42 alt="" border="0"> </a> </body> </html>
In this example, two versions of each image are used. For example, guest.gif is the guest book graphic, and guest1.gif is the same graphic with a border around it. Each link includes onMouseOver and onMouseOut handlers that change the image. Figure 13.2 shows Internet Explorer's display of this script.
)
Figure 13.2 Using JavaScript for image rollovers.
Workshop: Creating a Simple Animation | Next Section
Account Sign In
View your cart