The Web Professional's Handbook: Document Object Models -WebReference.com- | 8

The Web Professional's Handbook: Document Object Models

[The following is the conclusion of our series of excerpts from chapter 6 of the Glasshaus title, The Web Professional's Handbook.]

The images Object

The images object is similar to the forms object. The array document.images[] holds all images in the page, and again you can access them either by name or by index number.

document.images is not supported by Netscape 2 and IE 3. In fact, this was the very first JavaScript browser-compatibility problem. The solution is given in the example script below.

The most important feature of an individual image object is that you can change its src property. The browser shows the new image, downloading it when necessary. A now-forgotten genius used this behavior to create the image rollover effect. Put an image in a link. When the user rolls the mouse over the link, a new image is loaded and displayed; when the user removes the mouse, the old image is restored. If the images are designed correctly, this will give a nice effect. Although rollovers are the oldest examples of (very simple) interactivity and have been used in millions of sites, the effect is still interesting. Even more important: users have come to expect rollovers. You'll find an example of such a script later in this chapter.

Accessing the width and height of the image can occasionally be useful (for instance when the image is shown in a pop-up and you want to size the pop-up according to the image size). But except for this and the rollover effect, there aren't many more common effects with the images object.

Property	Read/write	Description
height	read only	The height of the image, as specified by the height attribute or the actual height if this isn't specified.
name	read-only	The name of the image, as defined by the name attribute.
src	read/write	The source file of the image. Setting this property causes the browser to download the image file from the server.
width	read-only	The width of the image, as specified by the width attribute or the actual width if this isn't specified.

Creating Image Objects

It is possible to create your own image objects. For example:

var x = new Image();
x.src = 'pix/theNewImage.gif';

Here we have created an image object and assigned a file to its src property. The browser will start downloading the file, but the image isn't yet shown in the page. The advantage is that the browser preloads the image files. When the image is needed, the user doesn't have to wait for it to download: it shows up immediately. We'll use this technique in the rollover script below.

Preloading doesn't work in early releases of Netscape 6. This bug has been solved in later releases.

Rollovers

In the years since the rollover effect was invented, many dozens of rollover scripts have been written. Some are good, some are ugly, and some are far too complex. The script below is one of the simplest and most powerful ones. It uses a strict system of naming. The normal image and the rollover image names should both start with the value of the name attribute of the corresponding <img> tag. For instance, in our example, we have a 'home' image and a 'place' image with the following names:

<img> element's name attribute	Normal Image	Rollover Image
home	home.gif	home_omo.gif
place	place.gif	place_omo.gif

If you use such a naming system, it's very easy to find out which image files you need for which <img> tags.

We start our script by declaring some variables. One points to the directory the image files are in, two are new arrays to hold all normal and all rollover images, and the important array stuff lists the names of all images with rollover effects within the document.

var base= "pix/"
var nrm = new Array();
var omo = new Array();
var stuff = new Array('home','place');

We now do some object detection. Does the browser support the document.images[] array? If not we shouldn't execute the script because it would only lead to error messages.

if (document.images)
{

Only when the browser supports document.images[] do we continue through the array stuff. Here we find the names of all images that should have a rollover effect. We go through them one by one and preload both the normal and the rollover images. These images are stored in the arrays nrm[] (normal images) and omo[] (onmouseover images).

for (i=0;i<stuff.length;i++)
{
    nrm[i] = new Image;
    nrm[i].src = base + stuff[i] + ".gif"
    omo[i] = new Image;
    omo[i].src = base + stuff[i] + "_omo.gif";
}
}

Now all is set up for the rollover effects. We write two functions: one to load the new image when the mouse rolls over the image and one to restore the old one when the mouse rolls off the image. Of course, in both functions we first check if document.images[] is supported. If it isn't we do nothing.

The over() function receives the index in the stuff array for the appropriate image name as a parameter and stores it in variable no. We find the name of the <img> tag through the array stuff[] and the src of the correct rollover image in the array omo[] under the same index number. We then change the src of the <img> tag to the newly found src.

function over(no)
{

if (document.images)

{

document.images[stuff[no]].src = omo[no].src

}
}

The out() function is exactly the same, except that it searches for the correct normal image in the nrm[] array.

function out(no)
{
if (document.images)
{
document.images[stuff[no]].src = nrm[no].src
}
}

Now to the HTML. You should assign onmouseover and onmouseout event handlers to the link around the image.

From IE 4 and Netscape 6 onwards browsers also accept event handlers on other tags than <a>, so you can register the event handlers on the <img> itself.

Note that it is possible to change the order of the <img> tags without breaking the page.

Created: March 11, 2003
Revised: March 28, 2003

URL: https://webreference.com/programming/professional/chap6/2

The Web Professional's Handbook: Document Object Models -WebReference.com- | 8