JavaScript® Bible, Sixth Edition

Chapter 12. Images and Dynamic HTML

IN THIS CHAPTER

• How to precache images

• How to swap images for mouse rollovers

• Changing stylesheet settings

• Modifying Body content dynamically

The previous eight lessons have been intensive, covering a lot of ground for both programming concepts and JavaScript. Now it's time to apply those fundamentals to learning more advanced techniques. I cover two areas here. First, I show you how to implement the ever-popular mouse rollover, in which images swap when the user rolls the cursor around the screen. Then I introduce you to techniques for modifying a page's style and content after the page has loaded.

The Image Object

One of the objects contained by the document is the image object—supported in all scriptable browsers since the days of NN3 and IE4. Image object references for a document are stored in the object model as an array belonging to the document object. Therefore, you can reference an image by array index or image name. Moreover, the array index can be a string version of the image's name. Thus, all of the following are valid references to an image object:

document.images[n]
document.images["imageName"]
document.imageName

We are no longer constrained by ancient scriptable browser limitations that required an image be encased within an a element to receive mouse events. You may still want to do so if a click is intended to navigate to a new URL, but to use a visitor's mouse click to trigger local JavaScript execution, it's better to let the img