Sams Teach Yourself JavaScript in 24 Hours

Using Dynamic Images

Long before the W3C DOM allowed JavaScript to change any part of a web page, a feature called dynamic images enabled you to swap one image for another with JavaScript. This technique is still supported by current browsers, and is still the most convenient (and compatible) way to work with images in JavaScript.

Working with image Objects

You can change images dynamically by using the image object associated with each one. The traditional way to do this is with the document.images array. This array contains an item for each of the images defined on the page. In the object hierarchy, each image object is a child of the document object.

With the W3C DOM, you can also assign an id attribute to an image within the <img> tag, and then use document.getElementById to find the object for that image. Each image object has the following properties:

• 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.

• 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. The image object has no methods. It does have three event handlers you can use:

• The onLoad event occurs when the image finishes loading. (Because 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

You can also 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 might sound useless, but it's a great way to work with modem-speed connections. After you've preloaded an image, you can replace any of the images on the page with that imageand because it's already cached, the change happens instantly. Even on a fast connection, this avoids flickering and makes animation smoother.

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";