Image

Syntax:: new Image([width,] [height])

The Image object is an image on an HTML form, created by using the HTML 'IMG' tag.

Any images created in a document are then stored in an array in the document.images property, and it is from here that they are accessed. If you have specified a name for an image created using the HTML 'IMG' tag, you can use that name when you index the image in the images array. You can also use the Image constructor and the new operator to create an image object which can then be displayed within an existing cell. The main use of this is to load an image from the network so that it is in cache before it needs to be displayed.

When one Image object replaces another, it cannot change the width and height properties of it (these are read-only for this object) and the browser displays the image with the dimensions set in the IMG tag. JavaScript can also be used to create animation by repeatedly changing the value of the src property. This isn't as fast as GIF animation because Javascript has to load each indivual frame as a separate file, whereas with GIF animation all the frames are contained in one file.

NOTE:

The event handlers onClick, onMouseOut and onMouseOver can also be used with the Internet Explorer browser, but not with Netscape. You can, however, use these event handlers in conjunction with the Image object with Netscape, if you define an Area object for the image, or if the IMG tag is placed within a Link object.

Examples

Code:

myImage = new Image() 

          myImage.src = "C:/Personal/Mountain.gif"

Explanation:

This example creates an Image object called MyImage.

Code:

onClick="javascript:void(document.River.src = myImage.src)"

Explanation:

You could then have this image replace an existing image River on, say, the click of a button.

Code:

Ocean.onload = myFunction

Explanation:

All the event handlers that are available with the Image object also have an equivalent property (spelled entirely in lower case letters) which can be used to set an image's event-handlers when created using the Image constructor. Assume you have a function called MyFunction which you want to set to the onload event-handler for an image called Ocean, you could accomplish this with this code in this example.

Properties

border

Syntax: Image.border

The border property is read-only, and is a string stating the width of the border of an image in pixels. For an image created using the Image constructor, this is 0.

complete

Syntax: Image.complete

The complete property is read-only and returns a Boolean value indicating whether or not the browser has completed loading the image.

constructor

Syntax: Object.constructor

This specifies a function to create an object's property and is inherited by all objects from their prototype.

height

Syntax: Image.height

The height property is read-only, and is a string stating the HEIGHT attribute of an IMG tag in pixels. Where an image has been created using the Image constructor, the height is of the image itself, not the HEIGHT value of the display.

hspace

Syntax: Image.hspace

The hspace property is read-only and specifies the HSPACE value of the IMG tag, which is the number of pixels space between the left and right margins of an image and surrounding text. For an image created using the Image constructor, the value of this property is null.

lowsrc

Syntax: Image.lowsrc

The lowsrc property specifies the URL of a low-resolution version of an image relating to the LOWSRC attribute of an IMG tag. A browser first loads a low-resolution version before replacing it with the high-resolution version of the src property.

name

Syntax: Image.name

The name property is read-only and reflects the NAME attribute of an IMG tag. If the Image object has been created by using the Image constructor, the value of this property is null.

prototype

Syntax: Object.prototype.name = value

This allows the addition of properties and methods to any object.

src

Syntax: Image.src

The src property is a string representing the URL of an image and reflects the SRC attribute of an IMG tag. The src property can be altered at any time, but when you do so the new image (if not the same size) is scaled to fit the height and width attributes of the IMG tag. Also, the loading of any other image into that cell is aborted, so the Lowsrc property should be altered before setting the src property.

vspace

Syntax: Image.vspace

The vspace property is read-only and specifies the VSPACE value of the IMG tag, which is the number of pixels space between the top and bottom margins of an image and surrounding text. For an image created using the Image constructor, the value of this property is null.

width

Syntax: Image.width

The width property is read-only, and is a string stating the WIDTH attribute of an IMG tag in pixels. Where an image has been created using the Image constructor, the width is of the image itself, not the WIDTH value of the display.

Methods

eval

Syntax: Object.eval(string)

The eval method is deprecated as a method of Object, but is still used as a high level function. It evaluates a string of JavaScript in the context of an object.

handleEvent

Syntax: Image.handleEvent(event)

The handleEvent method is used to evoke the handler for a specified event.

toSource