The IMG Element

The <IMG> Element

The <IMG> displays images in HTML, and, like all other HTML elements, this tag is active in HTML. You can see the properties and events of this element in Table 15.2 in overview, its properties in depth in Table 15.3, and its events in depth in Table 15.4. Note that JavaScript's core HTML properties, methods , and events that we discussed in Chapters 5, "Using Core HTML Properties," and 6, "Using Core HTML Methods and Events," also apply to this element.

Table 15.2. Overview of the Properties and Events of the <IMG> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Properties	Events
align	onabort
alt	onafterupdate
border	onerror
complete	onerrorupdate
dynsrc	onload
fileCreatedDate
fileModifiedDate
fileSize
fileUpdatedDate
galleryImg
height
hspace
isMap
longDesc
loop
lowsrc
name
nameProp
protocol
src
start
useMap
vspace
width
x
y

Table 15.3. The Properties of the <IMG> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Property	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
align				x			x	x	x	x
	Read/write
	This attribute sets the alignment of the <IMG> element. The possible values are "absbottom" (aligns the bottom with the absolute bottom of the surrounding text), "absmiddle" (aligns the middle with the middle of the surrounding text), "baseline" (aligns the bottom with the baseline of the surrounding text), "bottom" (aligns the bottom with the bottom of the surrounding text), "left" (the default, aligns to the left of the surrounding text), "middle" (aligns the middle with the surrounding text), "right" (aligns to the right of the surrounding text), and "top" (aligns the top with the top of the text).
alt				x			x	x	x	x
	Read/write
	Sets or gets alternate text for the graphic, displayed on mouse-over events or if the image can't load.
border		x	x	x			x	x	x	x
	Read/write
	Sets the thickness of the border in pixels. Set this property to zero if you're using the image in an <A> hyperlink element and don't want a border to appear. See "Mouse Rollovers" in this chapter for an example.
complete		x	x	x			x	x	x	x
	Read-only
	This property is true if the image has fully loaded and is false otherwise . If you specify a LOWSRC image, that's the one that's used; otherwise, the SRC image is used. (So don't rely on this property to make sure the SRC image is loaded if you're using both the SRC and LOWSRC properties.)
dynsrc							x	x	x	x
	Read/write
	Sets or gets the address of a video clip or VRML world to display in the element.
fileCreatedDate							x	x	x	x
	Read-only
	Holds the file's creation date in text form, such as "Sunday, December 07, 1997" . Don't rely on this property; many web servers won't supply this information.
fileModifiedDate							x	x	x	x
	Read-only
	Holds the date the file was last modified, in text form, such as "Saturday, December 06, 1997" . Don't rely on this property; many web servers won't supply this information.
fileSize							x	x	x	x
	Read-only
	Holds the size of the image file, in bytes.
fileUpdatedDate							x	x	x	x
	Read-only
	Holds the date the file was last updated in text form, such as "Friday, December 05, 1997" . Don't rely on this property; many web servers won't supply this information.
galleryImg										x
	Sets or gets whether the My Pictures Photo Support image toolbar is visible for the current image. Set to yes (or true; this is the default) to enable the Image toolbar for the image, or no (or false) to disable this toolbar for the image.
height		x	x	x			x	x	x	x
	Read/write
	Holds the height of the image, in pixels. Set this property to stretch an image; see "Using Images" in this chapter for an example.
hspace		x	x	x			x	x	x	x
	Read/write
	Holds the width of the invisible margin around the image, in pixels.
isMap				x			x	x	x	x
	Read/write
	This property is true if the image is part of an image map, and false otherwise. Corresponds to the ISMAP attribute.
longDesc				x						x
	Read/write
	Meant to provide a long description of the image, or the URL at which such a description may be found. Not in common use. Holds text.
loop					x	x	x	x	x	x
	Read/write
	Holds the number of times a video clip should play. The default value is 1, setting this value to -1 makes the loop play over and over.
lowsrc		x	x	x			x	x	x	x
	Read/write
	Holds the URL of a low-resolution version of the image to be displayed as the higher-resolution version (specified by the SRC attribute) loads. Set to a URL string.
name	x	x	x	x			x	x	x	x
	Read/write
	Holds the name of the control as a name string.
nameProp								x	x	x
	Read-only
	Holds the filename of the image file (unlike the lowsrc and src properties, which hold complete URLs). Contains a name string.
protocol							x	x	x	x
	Read-only
	Holds the protocol used to get the file "HyperText Transfer Protocol" (for HTTP) or "File Protocol" (for FTP).
src		x	x	x			x	x	x	x
	Read/write
	Holds the source URL for the image. Set to a URL string. See "Using Images" in this chapter. This property is also good for use with precaching imagessee "Precaching Images and the Image Object" in this chapter.
start							x	x	x	x
	Read/write
	Specifies when a video clip should start playing. Set to "fileopen" (the default) to make the video begin as soon as it finishes loading, or "mouseover" to begin the video when the user moves the mouse over it.
useMap				x			x	x	x	x
	Read/write
	Sets or gets the URL (often with a hash extension, such as #name) to use as a client-side image map.
vspace		x	x	x			x	x	x	x
	Read/write
	Holds the height of the invisible margin around the image, in pixels.
width		x	x	x			x	x	x	x
	Read/write
	Sets or gets the width of the image, in pixels. See "Using Images" in this chapter.
x			x
	Read-only
	Holds the X coordinate of the upper-left of the <IMG> element, in pixels.
y			x
	Read-only
	Holds the Y coordinate of the upper-left of the <IMG> element, in pixels.

Table 15.4. The Events of the <IMG> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Event	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
onabort		x	x	x			x	x	x	x
	Occurs when the user stops loading the image, as by clicking the Stop button.
onafterupdate							x	x	x	x
	Occurs in a data-bound object after updating the data in the data source.
onbeforeupdate							x	x	x	x
	Occurs in a data-bound object before updating the data in the data source.
onerror		x	x	x			x	x	x	x
	Occurs when there's been an error loading the image.
onerrorupdate							x	x	x	x
	Occurs in a data-bound object when an error happened while updating data in the data source.
onload		x	x	x			x	x	x	x
	Occurs when the LOWSRC image finishes loading; if there is no LOWSRC image, this event occurs when the SRC image finishes loading. Also occurs when each frame of an animated GIF image displays.