Learn Advanced JavaScript Programming

Table of Contents

The script in Example 25-4 lets the user display one image out of three available ones. There are two images ready for each of the three selections: low resolution and high resolution. When loading the requested selection, the low-resolution image is loaded first and then the high-resolution one:

<HTML>
<HEAD>
<TITLE>Aircrafts</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function displayImage(lowRes, highRes) {
  document.images[0].lowsrc = lowRes
  document.images[0].src = highRes
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="imageForm">
<B>Choose an image:</B>
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image1" CHECKED
 onClick="displayImage('img1l.gif','img1h.gif')"> IMAGE 1
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image2"
 onClick="displayImage('img2l.gif', 'img2h.gif')"> IMAGE 2
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image3"
 onClick="displayImage('img3l.gif', 'img3h.gif')"> IMAGE 3
<BR>
<IMG NAME="firstImage" SRC="img1h.gif" LOWSRC="img1l.gif" ALIGN="left"
VSPACE="10"><BR>
</FORM>
</BODY>
</HTML>

Example 25-4. A script to display one of three images; low-resolution images are loaded first.

name

The imageName.name property reflects the NAME attribute of the <IMG> HTML definition. The name property is a read-only one. Similar to forms, you can use an image’s name to reference it. If the first image in a document is defined by the following syntax, for instance, you can reference it as document.myImage as well as document.images[0]:

<IMG SRC="myPicture.gif" NAME="myImage">

src

scr specifies the URL of an image to be displayed in a document. The general syntax is as follows:

imageName.src

where imageName is either the name of an Image object’s instance or an element in the document.images array. The src property will be used in almost all this chapter’s examples. Consider the following statement:

var myImage = new Image()

An instance of the Image object, named myImage, is created with the Image() constructor. When you create an instance of the Image object in this fashion, it is not associated with any image. In order to associate it with an existing image you must assign a value to its src property, in the following method:

myImage.src = "myPicture.gif"

You can use either a full or relational URL. When you associate an image with an instance, in this fashion, the image is cached. Since it is already stored on the client side (where normally the cache is), the user does not have to wait for the image to be received from the server when you decide to display the image. When you adjust the src property of an element from the document.images array (or an image that is viewable on the page), the image immediately changes to the image at the new URL.

vspace

This property is a string specifying the margin in pixels between the top and bottom edges of an image and the surrounding text. The general syntax is as follows:

imageName.vspace

where imageName is either the name of an Image object’s instance or an element in the document.images array. The vspace property reflects the VSPACE attribute of the <IMG> tag. For images created with the Image()constructor, the value of the vspace property is 0. The vspace property is a read-only one. The script in Example 25-3 shows how an alert box can display, upon clicking a button, the height, width, and space figures of an image.

width

width is a string specifying the width of an image either in pixels or as a percentage of the window width. The general syntax is as follows:

imageName.width

where imageName is either the name of an Image object’s instance or an element in the document.images array. The width property reflects the WIDTH attribute of the <IMG> tag. For images created with the Image() constructor, the value of the width property is the actual, not the displayed, width of the image. The width property is a read-only one. The script in Example 25-3 shows how an alert box can display, upon clicking a button, the height, width, and space figures of an image.

Event Handlers

onAbort

An abort event occurs when the user aborts the loading of an image (for example, by clicking a link or the Stop button). The onAbort event handler executes a JavaScript code when an abort event occurs. In Example 25-5 (based on 25-4), an onAbort handler belonging to an Image object displays a message when the user aborts the image’s loading:

<HTML>
<HEAD>
<TITLE>Aircrafts</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function displayImage(lowRes, highRes) {
  document.images[0].lowsrc = lowRes
  document.images[0].src = highRes
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="imageForm">
<B>Choose an image:</B>
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image1" CHECKED
 onClick="displayImage('img1l.gif', 'img1h.gif')"> IMAGE 1
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image2"
 onClick="displayImage('img2l.gif', 'img2h.gif')"> IMAGE 2
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image3"
 onClick="displayImage('img3l.gif', 'img3h.gif')"> IMAGE 3
<BR>
<IMG NAME="onAbort" SRC="img1h.gif" LOWSRC="img1l.gif" ALIGN="left"
 VSPACE="10" onAbort="alert('You didn\'t get to see the
 image!')"><BR>
</FORM>
</BODY>
</HTML>

Example 25-5. The previous script with onAbort event handler.

onError

An error event occurs when the loading of an image causes an error. The onError event handler executes a JavaScript code when an error event occurs.

The onError event handler can be assigned a null value to suppress all error dialogues. When you set imageName.onerror to null, your user won’t see any JavaScript errors caused by the image.

An error event occurs only when a JavaScript syntax or runtime error occurs, and not when a Navigator error occurs. If you try to set imageName.src = 'notThere.gif', for instance, and notThere.gif does not exist, the resulting error message is a Navigator error message, and an onError event handler would not intercept that message.

In the following <IMG> tag, the onError event handler calls the function badImage if errors occur when the image loads:

<SCRIPT LANGUAGE="JavaScript">
<!--

function badImage(theImage) {
  alert('Error: ' + theImage.name + ' did not load properly.')
}

// -->
</SCRIPT>
<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER=2
onError="badImage(this)">

Table of Contents