Dynamic HTML: The Definitive Reference

Image Swapping

Before we had the true Dynamic HTML powers of the Version 4 browsers, Navigator 3 (and Internet Explorer 3 for the Macintosh only) gave us a glimpse of things to come with image swapping. The basis for this technique is a document object model that defines an image as an object whose properties can be changed (or “replaced,” in the language of cascading style sheets) on the fly. One of those properties, src , defines the URL of an image loaded initially by virtue of an <IMG> tag and currently displayed in the page. Change that property and the image changes, within the same rectangular space defined by the <IMG> tag’s HEIGHT and WIDTH attributes (or, lacking those attribute settings, the first image’s dimensions as calculated by the browser), while all the other content around it stays put.

Navigator 3 (and later) goes one step further by defining an Image object from which new “virtual” images can be created in the browser’s memory with the help of scripts. These kinds of images do not appear in the document, but can be scripted to preload images into the browser’s image cache as the page does its original download. Thus, when it comes time to swap an image, the switch is nearly instantaneous because there is no need for network access to grab the image data.

The example in this section shows you how to pre-cache and swap images for the buttons of an imaginary video controller. There are four controls—Play, Stop, Pause, and Rewind. Each control has its own image ...