JavaScript: The Definitive Guide

Previous Chapter 16 Next
 

16. Special Effects with Images

Contents:
Image Replacement with the Image.src Property
Off-Screen Images and Caching
Image Event Handlers
Other Image Properties
Image Replacement Example
Other Image Techniques

In Navigator 3.0, the images[] property of the Document object is an array of Image elements, each one representing one of the inline images, created with an <IMG> tag, that is contained in the document. While web browsers have always been able to display images with the <IMG> tag, the addition of the Image object in Navigator 3.0 is a major step forward--it allows programs to dynamically manipulate those images.

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.


Previous Home Next
Cookie Example Book Index Off-Screen Images and Caching

HTML: The Definitive Guide CGI Programming JavaScript: The Definitive Guide Programming Perl WebMaster in a Nutshell
Hosted by uCoz