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.
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')" />
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>
