The Image object represents an image that was created with the ![]()
tag.
Images can be downloaded and cached dynamically by using the Image() constructor.
Images cannot be displayed using the constructor.
The constructor takes two optional arguments, width and height.
width specifies the width of the image in pixels.
height specifies the height of the image in pixels.
If these arguments are larger or smaller than the actual image, the image will be stretched to these dimensions.
The image to load is specified using dot notation and the src property.
| Properties/Methods/Events | Description |
| border | Width of border around image |
| complete | Has image finished loading? |
| height | Height of image |
| hspace | Padding on left and right of image. |
| lowsrc | Alternate image for low-resolution displays |
| name | Name of image |
| src | URL of image |
| vspace | Padding on top and bottom of image |
| width | Width of image |
| handleEvent() | Invokes an images event handler |
| onAbort | Handler when image load is aborted |
| onError | Handler when error occurs while loading image |
| onKeyDown | Handler for KeyDown events within image |
| onKeyPress | Handler for KeyPress events within image |
| onKeyUp | Handler for KeyUp events within image |
| onLoad | Handler when image is finished loading |
<html>
<head>
<title>Example of Image Object</title>
<script language="JavaScript">
<!--
alternate=0;
circle = "circle.gif";
square = "square.gif";
function changeImage(){
if(alternate==0) {
document.magic.src=circle;
alternate=1;
} else {
document.magic.src=square;
alternate=0;
}
}
-->
</script>
</head>
<center>
<form>
<input type="button"
value="Change Image"
onClick="changeImage()">
</form>
<img name="magic" src="http://www.java2s.com/style/logo.png">
</center>
</html>