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:
Value | Meaning |
complete |
The resource has completely loaded and is available to the document and therefore manipulation. |
interactive |
The resource hasn't completely downloaded, but is available to the document and scripting |
loading |
The resource is being downloaded |
uninitialized |
The resource is not available - normally, this value indicates that the resource is downloading |
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
file: /Techref/language/html/ib/Media_Embedding/img.htm, 27KB, , updated: 2005/10/9 09:39, local time: 2024/8/22 02:53,
18.222.110.149:LOG IN
|
©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions? <A HREF="http://piclist.com/tecHREF/language/html/ib/Media_Embedding/img.htm"> <IMG></A> |
Did you find what you needed? |
![]() o List host: MIT, Site host massmind.org, Top posters @none found - Page Editors: James Newton, David Cary, and YOU! * Roman Black of Black Robotics donates from sales of Linistep stepper controller kits. * Ashley Roll of Digital Nemesis donates from sales of RCL-1 RS232 to TTL converters. * Monthly Subscribers: Gregg Rew. on-going support is MOST appreciated! * Contributors: Richard Seriani, Sr. |
Welcome to piclist.com! |
.