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
    • Using Image Maps with JavaScript
    • Using Dynamic Images in JavaScript
    • Creating Rollovers
    • Workshop: Creating a Simple Animation
    • Summary
    • Q&A
    • Quiz
    • Exercises
  • 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

Using Dynamic Images in JavaScript

One of the most useful features of JavaScript is the capability to dynamically change images. This means you can create images that "magically" change, which could be used for clocks, image rollovers (images that change when you move the mouse over them), or even simple animations.

The images in a Web page are reflected in an array, just like form elements. By modifying the properties of the array items, you can replace the image with a different one. This enables you to create dynamically changing content on the page without even using frames or layers.

This technique isn't perfect for all applications. Before you get started, note the following limitations:

• You can only change existing images in the page with this technique—you can't add new ones or remove an image entirely.
• You can replace an image with a larger or smaller image, but this may not look good because the text won't be reformatted to match.
• Any image you use will have to be loaded from the server. This makes this technique impractical for complicated animations or large images.

Working with the images Array

You can change images dynamically by using the images array. This array contains an item for each of the images defined on the page. Each image can also have a name. In the object hierarchy, each image object is a child of the document object.

Each image object has the following properties:

• border represents the BORDER attribute of the <IMG> tag. This defines whether a border is drawn around a linked image.
• complete is a flag that tells you whether the image has been completely loaded. This is a Boolean value (true or false).
• height and width reflect the corresponding image attributes. This is for information only; you can't change an image's size dynamically.
• hspace and vspace represent the corresponding image attributes, which define the image's placement on the page. Again, this is a read-only attribute.
• name is the image's name. You can define this with the NAME attribute in the image definition.
• lowsrc is the value of the LOWSRC attribute. This is a Netscape-specific attribute that enables you to specify a low-resolution image to be loaded before the "real" image.
• src is the image's source, or URL. You can change this value to change images dynamically.

For most purposes, the src attribute is the only one you'll use. However, you can also change the lowsrc attribute. This defines a low-resolution image to load first and will be used only when you change the src attribute.

The image object has no methods. It does have three event handlers you can use:

• The onLoad event occurs when the image finishes loading. (Since the onLoad event for the entire document is triggered when all images have finished loading, it's usually a better choice.)
• The onAbort event occurs if the user aborts the page before the image is loaded.
• The onError event occurs if the image file is not found or corrupt.

Preloading Images

Although you can't add an image to the page dynamically, you can create an independent image object. This enables you to specify an image that will be loaded and placed in the cache, but will not be displayed on the page.

This may sound useless, but it's a great way to work with modem-speed connections. Once you've preloaded an image, you can replace any of the images on the page with that image—and because it's already cached, the change happens instantly.

You can cache an image by creating a new image object, using the new keyword. Here's an example:

Image2 = new Image();
Image2.src = "arrow1.gif";

Share This