JavaScript Kit > JavaScript Reference > Here

Image Object

Images on the page are represented by the Image object in JavaScript. They can be accessed using the syntax:

document.images.name //access image by its name
document.images[i] //access image by its position within array
document.images.length //returns total number of images

You can define an image on the fly using the Image Constructor function:

new Image([width], [height])

where "width" and "height" are optional.

Related Tutorials

• Accessing images/ image rollovers
• Creating depressible images
• Building a JavaScript image slideshow

Events

Events	Description
onabort	Code is executed when user aborts the downloading of the image.
onerror	Code is executed when an error occurs with the loading of the image (ie: not found). Example(s)
onload	Code is executed when the image successfully and completely downloads.

Properties

Properties	Description
border	Integer that specifies the border width of the image, in pixels.
complete	Boolean that specifies whether the image has loaded completely (successful or not).
fileSize	Returns the file size of the specified image on the page. In IE Windows, a numeric string is returned, while in IE Mac, a number instead. Use it on any image or a loop to cover all images on the page. IE only property.
height	The height of the image.
hspace	Reflects the "hspace" attribute.
lowsrc	Reflects the "lowsrc" attribute.
name	The name of the image as assigned by the "name" attribute.
src	A read/write string specifying the URL of the image. Example(s).
vspace	Reflects the "vspace" attribute.
width	The width of the image.

Examples

onerror

<image src="test.gif" onerror="alert('This image didn\'t download successfully')" />

src

This example creates the classic image rollover effect on an image link:

<a href="http://www.dynamicdrive.com" onMouseover="document.images.logo.src='dd2.gif'" onMouseout="document.images.logo.src='dd.gif'"><img name="logo" src="dd.gif" /></a>

---