Learn Advanced JavaScript Programming

Table of Contents

As mentioned earlier, an animation should consist of images of the same size. Example 25-2 demonstrates a simple animation with seven images of identical dimensions.

<HTML>
<HEAD>
<TITLE>images</TITLE>
<SCRIPT LANGUAGE=“JavaScript”>
<!--

var pause = 250
var on = new Array()
on[0] = new Image(12, 12)
on[1] = new Image(12, 12)
on[2] = new Image(12, 12)
on[3] = new Image(12, 12)
on[4] = new Image(12, 12)
on[5] = new Image(12, 12)
on[6] = new Image(12, 12)

for (var i = 0; i < 7; ++i) {
   on[i].src = “1” + i + “.gif”
}

timerID = setTimeout(“”, 0)

function animate(num, imageIndex) {
   document.images[imageIndex].src = on[num].src
   num = (num == on.length – 1) ? 0 : (++num)
   var str = “animate(” + num + “, ” + imageIndex + “)”
   timerID = setTimeout(str, pause)
}

// -->
</SCRIPT>
</HEAD>
<BODY onLoad=“timerID = setTimeout(‘animate(1, 0)’, pause)”>
<IMG SRC="&{on[0].src};"
HEIGHT="&{on[0].height};"
WIDTH="&{on[0].width};">
</BODY>
</HTML>

Example 25-2. A simple animation with images of identical size.

The script consists of a few immediate statements as well as a deferred code. First, an array named on is created to store the images of the animation. Each element is actually an instance of the Image object.

Take a look at the following statement:

timerID = setTimeout("", 0)

This statement sets the value of timerID to null, but it does not explicitly assign that value. This syntax is useful with MSIE 3.0 because it generates an error if you use the clearTimeout() with a variable that holds a null value. This is not so important in Example 25-2 because clearTimeout() is not used. Furthermore, the preceding example does not work at all under MSIE 3.0, because that browser does not support the Image object.

function animate(num, imageIndex) {
  document.images[imageIndex].src = on[num].src
  num = (num == on.length – 1) ? 0 : (++num)
  var str = "animate(" + num + ", " + imageIndex + ")"
  timerID = setTimeout(str, pause)
}

The animate() function accepts two arguments. The first specifies the index of the first image in the animation according to the on array. Take a look at the following statement from animate(), which is the most important one:

document.images[imageIndex].src = on[num].src

The current image that appears in the document at the imageIndex index of the document.images array is replaced by the image in the on array, whose index is equal to the first argument handed to the function. The second statement in this function sets the value of num to 0 if the current value exceeds the index of the last entry in the on array. Otherwise, it increments the value of num, so the following image is displayed during the next execution of the function.

Properties

Instances of the Image object feature many properties, some of which are more useful than others. You can also add more properties by creating prototypes. This section describes each property in depth.

border

An image’s border appears only when the image is used in a hypertext link and when the value of the BORDER attribute is set to a positive integer. The general reference is as follows:

imageName.border

where imageName is either the name of an Image object’s instance or an element in the document.images array. The border property is a read-only one. The following function displays the image’s border if it is not 0:

function checkBorder(theImage) {
  if (theImage.border == 0)
  alert('The image has no border!')
  else
  alert('The image's border is ' + theImage.border)
}

complete

This property is a Boolean value that indicates whether Navigator has completed its attempt to load an image. The general specification is as follows:

imageName.complete

where imageName is either the name of an Image object’s instance or an element in the document.images array.

The complete property does not work properly on some platforms, so check it first on all platforms.

height

The height property specifies the height of an image, either in pixels or as a percentage of the window’s total height. The general syntax is as follows:

imageName.height

where imageName is either the name of an Image object’s instance or an element in the document.images array. The height property reflects the HEIGHT attribute of the <IMG> tag. For images created with the Image() constructor, the value of the height property is the actual height, not the displayed height. The height 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.

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

function showImageSize(theImage) {
  alert('height=' + theImage.height +
 '; width=' + theImage.width +
 '; hspace=' + theImage.hspace +
 '; vspace=' + theImage.vspace)
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="bla.gif" HEIGHT=60 WIDTH=70 VSPACE=30 HSPACE=10>
<FORM>
<INPUT TYPE="button" VALUE="show image size" onClick=
   "showImageSize(document.images[0])">
</FORM>
</BODY>
</HTML>

Example 25-3. A script to display the height, width, and space around an image.

hspace

The hspace property specifies the margin in pixels between the left and right edges of an image and the surrounding text. The general syntax is as follows:

imageName.hspace

where imageName is either the name of an Image object’s instance or an element in the document.images array. The hspace property reflects the HSPACE attribute of the <IMG> tag. For images created with the Image()constructor, the value of the hspace property is 0. The hspace 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.

lowsrc

lowsrc is a string specifying the URL of a low-resolution version of an image to be displayed in a document. The general syntax is as follows:

imageName.lowsrc

where imageName is either the name of an Image object’s instance or an element in the document.images array. The lowsrc property initially reflects the LOWSRC attribute of the <IMG> tag. Navigator loads the smaller image specified by lowsrc and then replaces it with the larger image specified by the src property. You can change the lowsrc property at any time.

Table of Contents