The Image element is used to incorporate in-line graphics into an HTML document. This element cannot be used for embedding other HTML text.

The Image element, which is empty (no closing element), has these attributes:

ALIGN="left|right|top|texttop|middle|
absmiddle|baseline|bottom|absbottom"
ALIGN=left image will float the image to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image.
ALIGN=right will align the image aligns with the right margin, and the text wraps around the left.
ALIGN=top aligns itself with the top of the tallest item in the line.
ALIGN=texttop aligns itself with the top of the tallest text in the line (this is usually but not always the same as ALIGN=top).
ALIGN=middle aligns the baseline of the current line with the middle of the image.
ALIGN=absmiddle aligns the middle of the current line with the middle of the image.
ALIGN=baseline aligns the bottom of the image with the baseline of the current line.
ALIGN=bottom aligns the bottom of the image with the baseline of the current line. (Essentially, this is the same as ALIGN=baseline)
ALIGN=absbottom aligns the bottom of the image with the bottom of the current line.

ALT="Alternative Text"
Optional text as an alternative to the graphic for rendering in non-graphical environments. Alternate text should be provided for whenever the graphic is not rendered (i.e. if the user has image loading turned off). Alternate text is mandatory for Level 0 documents. Internet Explorer and Netscape (4.0 and above) also use any ALT text set as a ToolTip to be displayed when the users mouse pauses over the image. Example of use:

<IMG SRC="triangle.gif" ALT="Warning:"> Be sure to read these instructions.

ISMAP
The ISMAP attribute identifies an image as an image map. Image maps are graphics in which certain regions are mapped to other documents. By clicking on different regions, different resources can be accessed from the same graphic. Example of use:

<A HREF="http://machine/htbin/imagemap/sample">
<IMG SRC="sample.gif" ISMAP></A>

NOTE : To be able to employ this type of image maps in HTML documents, the HTTP server which will be controlling document access must have the correct cgi-bin software installed to control image map behaviour. i.e. the document must have access to an image map handling script and the map file defining the graphic ’hot-spots’

A simpler form of image map, known as client-side image maps are also possible. Currently, this type of map is a proposed extension to HTML. For details, see Client Side Image Maps.

SRC="URL of image"
The value of the SRC attribute is the URL of the image to be displayed. Its syntax is the same as that of the HREF attribute of the <A> element. SRC is the only mandatory attribute of the <IMG> element. Image elements are allowed within anchors.

<IMG SRC="warning.gif">Be sure to read these instructions.

The SRC attribute can accept fully qualified, or partial, relative URL's, or even just image names (providing the image is located in the same directory as the HTML document).

WIDTH=value HEIGHT=value
The WIDTH and HEIGHT attributes allow the browser to determine the text layout surrounding images before the entire image has been downloading, which can significantly speed up display of the document text. If the author specifies these, the viewer of their document will not have to wait for the image to be loaded over the network and its size calculated. Internet Explorer and Netscape use image placement mechanisms, so that if the display of in-line images has been turned off, the space that the images would occupy in the page is marked as if the image were there (with any ALT text being displayed in the place holder). This allows authors to be sure that the text layout on the page will be as desired, even if the user is not displaying the images.

BORDER=value
This lets the document author control the thickness of the border around an image displayed.
It is useful if the image is to be a hyperlink, in that the BORDER can be set to "0" to avoid the display of the standard blue hypertext link border.

VSPACE=value HSPACE=value
For the floating images (i.e. those displayed with an ALIGN=left|right attribute) it is likely that the author does not the text wrapped around the image to be pressed up against the image. VSPACE controls the vertical space above and below the image, while HSPACE controls the horizontal space to the left and right of the image. The Value should be a pixel value.

LOWSRC
Using the LOWSRC attribute, it is possible to use two images in the same space. The syntax is :

<IMG SRC="hiquality.gif" LOWSRC="lowquality.gif">

Browsers that do not recognise the LOWSRC attribute cleanly ignore it and simply load the image specified by the SRC attribute.
Browsers that support this attribute however, will load the image called "lowquality.gif" on their first layout pass through the document. When the rest of the document has been completely loaded and formatted on the page, the browser will then redraw the page and load the image specified by the standard SRC attribute. This allows the author to specify a low resolution (or smaller file size version of the main image - perhaps a grey scale version) image to be displayed initially while the document is loading, which is later replaced by the higher quality version.
Any graphic file format that the browser supports can be used interchangeably within the LOWSRC and SRC attributes. You can also specify width and/or height values in the <IMG> element, and both the high-res and low-res versions of the image will be appropriately scaled to match. However, if no width and height values have been set, the values used for the LOWSRC image (i.e. the dimensions of that image) will be used to re-scale the SRC image. This is to minimise page format disruption that would be caused by the browser trying to load two different sized images into the same page space.

NAME
This attribute sets the name of the image in the document. It can then be accessed by scripting methods (in Netscape 3.0 and Internet Explorer 4.0 and above), by referencing the Images collection.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <IMG> section. Note that any text provided in the TITLE attribute overrides that presented in the ALT attribute as the ToolTip - the contents of the ALT attribute will only be seen if the image can't be loaded for any reason.

LANG="language setting"
The LANG attribute can be used to specify what language the <IMG> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <IMG> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <IMG> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <IMG> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <IMG> element for scripting purposes. Any <IMG> element with an ID attribute can be indirectly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <IMG> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. For the <IMG> element, data binding is supported on the SRC attribute, therefore the data in the referenced column should be a valid URL (or URL fragment) pointing to an image file.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <IMG> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

Example
The following HTML fragment produces the display shown below.

<IMG ALIGN="left" SRC="mosaic.gif" HSPACE="20" ALT="Mosaic logo"> Mosaic, from the <B>N</B>ational <B>C</B>entre for <B>S</B>upercomputing <B>A</B>pplications represents the original graphical browser which Netscape development was based on.
<BR CLEAR="all">
<HR>
<IMG ALIGN="right" SRC="netscape.gif" HSPACE="20" ALT="Netscape logo"> Netscape, from <B>Netscape Communications</B>, after initial development from Mosaic, stormed away and became more or less the <I>de facto</I> Web browser.
<BR CLEAR="all">
<HR>
<IMG ALIGN="left" SRC="iexplore.gif" HSPACE="20" ALT="Internet Explorer logo">Internet Explorer, from <B>Microsoft </B>, exhibits Microsoft's serious intentions in the web browser market and compete head-to-head with Netscape, offering the same functionality...and then some more.
<BR CLEAR="all">
<HR>

Mosaic, from the National Centre for Supercomputing Applications represents the original graphical browser which Netscape development was based on.

---

Netscape, from Netscape Communications, after initial development from Mosaic, stormed away and became more or less the de facto Web browser.

---

Internet Explorer, from Microsoft, exhibits Microsoft's serious intentions in the web browser market and competes head-to-head with Netscape, offering the same functionality...and then some more.

---

Every <IMG> element in a document is an object that can be manipulated through scripting. Note that more scripting of the <IMG> element/object is supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape (from v3.0) does support the Images collection, for manipulation of images within a document. See the Images collection topic for details of Netscape support.

<IMG...> Properties
The <IMG...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <IMG> element supports the following properties:

align
The align property reflects the setting of the ALIGN attribute.

alt
The alt property reflects the setting of the ALT attribute.

border
The border property reflects the setting of the BORDER attribute.

complete
The complete property has a boolean (i.e. True or False) value, depending on whether the image has fully loaded or not.

dataFld
The dataFld property reflects the setting of the DATAFLD attribute.

dataSrc
The dataSrc property reflects the setting of the DATASRC attribute.

fileCreatedDate
The Internet Explorer 4.0 specific fileCreatedDate property returns the date that the referenced <IMG> file was created.

fileModifiedDate
The Internet Explorer 4.0 specific fileModifiedDate property returns the date that the referenced <IMG> file was last updated.

fileSize
The Internet Explorer 4.0 specific fileSize property returns the size of the referenced <IMG> file in bytes.

fileUpdatedDate
The Internet Explorer 4.0 specific fileUpdatedDate property returns the date that the referenced <IMG> file was last updated.

height
The height property reflects the setting of the HEIGHT attribute.

hspace
The hspace property reflects the setting of the HSPACE attribute.

isMap
The isMap property reflects the setting of the ISMAP attribute.

lowsrc
The lowsrc property reflects the setting of the LOWSRC attribute.

name
The name property reflects the setting of the NAME attribute.

readyState
The readyState property can be one of 4 values, depending on the current state of the resource, referenced in the HREF attribute. The possible values of the readyState property are:

Note that the readystate property is read-only.

scrollHeight
The scrollHeight property reflects the contents of the <IMG> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <IMG> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <IMG> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <IMG> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <IMG> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <IMG> element.

src
The src property reflects the setting of the SRC attribute.

vspace
The vspace property reflects the setting of the VSPACE attribute.

width
The width property reflects the setting of the WIDTH attribute.

<IMG...> Methods
The <IMG...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Also, the <IMG> element supports the following methods:

blur
The blur method can be used to force the users focus away from the image, executing any script functions linked to the onblur event (see below).

focus
The focus event can be used to set the focus on the referenced image, causing the onfocus event to execute

<IMG...> Events
The <IMG...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <IMG> element supports the following events:

onabort
If the user stops the download of your HTML document before any images defined in <IMG> elements have finished downloading, then (if present) this event handler will execute whatever script function it is set to activate. For example, if you use large graphics and the user cancels the download because they are accessed slowly, perhaps they would prefer to be transferred to a low-graphics version of your site?

onblur
The onblur event executes any script functions attached to it when the users focus moves away from the image (either by clicking another part of the document, by tabbing away from the image, or by a script using the blur method).

onerror
This event handler can be used to execute script functions if there is an error while the image is downloading (perhaps caused by an incorrect SRC="..." declaration in the <IMG> element, or a network error).

onfocus
onfocus is used to execute script functions when the user focuses on the image, either by clicking it (it then fires after the respective onmouse* events), tabbing to it, or by another script function using the focus method.

onload
The OnLoad event handler can execute script functions when the browser has successfully displayed the image specified in the <IMG> element. For example, as Netscape supports the image object in its Object Model, using this event handler (in conjunction with the OnError event) can be useful for tracking whether the images have been successfully displayed or not.

onresize
The onresize event is fired whenever the <IMG> element is resized, through scripting.

© 1995-1998, Stephen Le Hunte

Comments: