The Image object

The image object corresponds to HTML elements inserted through

An Image object is accessed through the document.images array or, if the image is named, through document.imageName. Manipulating images through JavaScript is an important capability.

Constructor

This constructor allocates a new Image object of the specified size. The main purpose for an Image object is to then set it src property in order to preload images that are used later. In such an application, the Image object is never actually used after its src is set; the purpose is to get the browser to cache the image. See below for an example.

Properties

border

This property gives the size of the border around images that appear inside hypertext links. It is specified through the border attribute of the <img> tag. It is read-only.

complete

This is a Boolean property that determines whether the image has finished loading. It is read-only.

height

This property gives the height of the image as specified through the height attribute (if present) or as it is in the actual image file. It is read-only.

hspace

This property gives the number of empty pixels on the left and right of the image as given in the hspace attribute. It is read-only.

lowsrc

Netscape (but not Internet Explorer) supports the nonstandard lowsrc attribute in the <img> tag, which gives an alternate image to show on low-resolution displays. This property gives that value (as a string). It is read/write.

name

This read-only property gives the name of the image given by its name attribute.

src

This property gives a string representing the URL of the image file. It is read/write.

vspace

This property gives the number of empty pixels on the top and the bottom of the image as given in the vspace attribute. It is read-only.

width

This property gives the width of the image as specified through the width attribute (if present) or as it is in the actual image file. It is read-only.

It follows from the above description that all the image properties except of src (and lowsrc) can only be set up in the <img> tag when the image is loaded into the browser. The src property, however, can be modified to dynamically substitute one image with the other. In this case the substituted image will have the same size as the original image and will be scaled to this size automatically.

In the following example a new image will be loaded every 3 seconds.

The slide show is produced by the following code:

<script type="text/javascript">
var slides = new Array(11)
    slides[0] = "bird.jpg";
    slides[1] = "cactus.jpg";
    slides[2] = "castles.jpg";
    slides[3] = "cottage.jpg";
    slides[4] = "deer.jpg";
    slides[5] = "deer.jpg";
    slides[6] = "eifel.gif";
    slides[7] = "lake.jpg";
    slides[8] = "mtn3.jpg";
    slides[9] = "shore.jpg";
    slides[10] = "parkst.jpg";
var i = 0;
var tID;
function slideShow()
{
    i = (i+1) % 11;
    var imgObject = document.getElementById("slide");
    imgObject.src = slides[i];
}
function startShow()
{
    tID = setInterval("slideShow()", 3000);
}
function stopShow()
{
    clearTimeout(tID);
}
</script>
<form>
<table>
<tr><td colspan="2">
<img src="bird.jpg" name="slide" border="10" /></td></tr>
<tr><td align="left">
<input type="button" value=" start show " onclick="startShow()" />
</td><td align="right" />
<input type="button" value=" stop show " onclick="stopShow()" />
</td></tr>
</table>
</form>

As you see, the images are changed by the slideShow() function which is called every 3 seconds by using the setInterval("slideShow()", 3000) command. The auxiliary parameter i specified the next image to be loaded. This parameter is modified cyclically from 0 to 10;

A disadvantage of this approach is that you sometimes need to wait more than 3 seconds for the browser to download a new image. To improve the performance, you can preload all images that the user may need, storing the images in the browser's cache. Then the new image file for the slide show will be quickly retrieved from a local computer, rather than from a remote Web server.

All you need to modify in the above code to implement this approach is the following three things:
- Images declaration part. For each slide we create an Image object in the For loop.
- Specify the src property of each image object in the 11 lines following the For loop. This forces the browser to preload the images into the cache.
- Set the src property of the new image according to its value in the array (see the slideShow() function).

<script type="text/javascript">
var slides = new Array(11)
for (i=0; i < 10; i++) {
    slides[i] = new Image(428, 290);
}
    slides[0].src = "bird.jpg";
    slides[1].src = "cactus.jpg";
    slides[2].src = "castles.jpg";
    slides[3].src = "cottage.jpg";
    slides[4].src = "deer.jpg";
    slides[5].src = "deer.jpg";
    slides[6].src = "eifel.gif";
    slides[7].src = "lake.jpg";
    slides[8].src = "mtn3.jpg";
    slides[9].src = "shore.jpg";
    slides[10].src = "parkst.jpg";
function slideShow()
{
    i = (i+1) % 11;
    var imgObject = document.getElementById("slide");
    imgObject..src = slides[i].src;
}
</script>

Try how it works: