The Image object (also the images array) is an object created for each image within a document. (The images array is a property of the document object). The image object and all properties and events detailed here are Netscape specific (versions 3.0 and above), as the image object is a JavaScript 1.1 object only. Also, most of the properties are read-only. The image size and physical placement in the display window are decided by Netscape while it is downloading the page and can not be altered. However, images can be 'animated' by dynamically changing their src properties.

Properties	Methods	Events
border, complete, height, hspace, length, lowsrc, name, prototype, src, vspace, width	None	onAbort, onError, onLoad,

all supported by Netscape only

Image Properties
border
The border property returns the border set on the image (if it exists), according to the <IMG BORDER="..."> attribute setting.

complete
The complete property is a boolean (i.e. true or false, or 1 or 0) value that is set according to whether the particular image has been succesfully loaded by Netscape or not. For example :

if (document.images[0].complete == true)
alert ('First image loaded')

would display the message 'First image loaded' if the documents first image (referenced by it's position in the images array) has been sucessfully loaded by Netscape.

height
The height property represents a pixel value that reflects any setting of the <IMG HEIGHT="..."> attribute.

hspace
The hspace property represents a pixel value that reflects any setting of the <IMG HSPACE="..."> attribute.

length
The length property is a property of the images array and returns the number of images in the referenced document. For example :

var vNumImg=document.images.length

would store the number of images in the document in the variable vNumImg

lowsrc
This property reflects any given lowsrc attribute (i.e. <IMG LOWSRC="...">

name
This property reflects the name of the image, as specified by the NAME attribute of the <IMG> element.

prototype
The prototype property can be used to set the properties of a new image, declared by the new Image JavaScript declration. See any recent JavaScript language reference for further details.

src
This property reflects the URL of the image, as specified by the SRC attribute of the <IMG> element.

vspace
The vspace property represents a pixel value that reflects any setting of the <IMG VSPACE="..."> attribute.

width
The width property represents a pixel value that reflects any setting of the <IMG WIDTH="..."> attribute.

Image Methods
The Image object has no methods

Image Evenets
onAbort
The OnAbort event handler can be used to execute script functions in the event that the user cancels any further downloading of the document by pressing the browsers 'Stop' button. For further details see the Scripting the <IMG> element

onError
The OnError event handler can be used to execute script functions in the event that Netscape encountered an error while downloading the specified image. For example, if the image doesn't exist at the location pointed to by the SRC attribute of the <IMG> element. For further details see the Scripting the <IMG> element

onLoad
This event handler can be used to execute script functions when the image is displayed, rather than downloaded. By manipulating properties of the Image object, it is possible to load several images and display according to different scenarios. The OnLoad event for each particular image will only be trigerred when the image is actually displayed. For further details see the Scripting the <IMG> element

Example
The document fragment below changes the displayed image according to which link the users mouse is over. All the images are pre-loaded into memory to speed up display of the images.

<SCRIPT LANGUAGE="JavaScript">
// Preload animation images
theImages = new Array()
for(i = 1; i < 6; i++) {
theImages[i] = new Image()
theImages[i].src = "images/image" + i + ".gif"
}

function change_image(idx) {
document.animation.src="images/image" + idx + ".gif"
}
</SCRIPT>
. . .
<IMG NAME="animation" SRC="images/image1.gif" ALT="[Animation]" WIDTH="50" HEIGHT="50">

<A HREF="1.htm" OnMouseOver="change_image(1)">Graphic A</A>
<A HREF="2.htm" OnMouseOver="change_image(2)">Graphic B</A>
<A HREF="3.htm" OnMouseOver="change_image(3)">Graphic C</A>
<A HREF="4.htm" OnMouseOver="change_image(4)">Graphic D</A>
<A HREF="5.htm" OnMouseOver="change_image(5)">Graphic E</A>

Try it :

NOTE : The Image object is currently only supported by Netscape, the above example acts exactly as the example code would act in Netscape, but uses ActiveX trickery to obtain the right effect.

---

---