16.1 Image Replacement with the Image.src Property

The main feature of the Image object is that its src property is read/write. You can read this property to obtain the URL from which an image was loaded. And more importantly, you can set the src property to make the browser load and display a new image in the same space. In order for this to work, the new image must have the same width and height as the original one.

The ability to dynamically replace one image in a static HTML document with another image opens the door to any number of special effects, from animation, to images that change when clicked on, to "digital clocks" that update themselves in real time. With a bit of thought, you can probably imagine many more potential uses for this technique. In order to make the image replacement technique viable, and in order to make animations and other special effects responsive enough to be useful, we need some way to ensure that the necessary images are loaded into the browser's cache.