The document.images object reflects the images on a web page. In a frame-based page, each frame has its own document object.

Not only are all the images in a document packed into one objet, but each image is also an object of its own. Thus, you can refer to an image in one of the following ways:

document.images[i] // array notation
document.images.imageName // property notation

Consider the following HTML definition:

<IMG SRC="anything.gif" NAME="anything" 
     HEIGHT="100" WIDTH="100">

Let's suppose the this code defines the third image on the page. The following references reflect that image:

document.images[2] // array notation
document.images.anything // property notation
document.anything // property notation (a shortcut)

If you decide to use the array notation, be prepared to change the indices in your scripts whenever you add a new image before an existing one. Therefore, we highly recommend the property notation.

JavaScript also offers the standard document.images.length property, which holds the actual number of images on the page. For example, if there are 10 images on the page, document.images.length evaluates to 10, so document.images[9] reflects the last image (because array indices start from 0).