IMG - inline images
Used to insert images. IMG is an empty element and so
the end tag is forbidden. Images can be positioned vertically relative
to the current textline or floated to the left or right. See
BR with the CLEAR attribute for control
over textflow.
e.g. <IMG SRC="canyon.gif" ALT="Grand Canyon">
IMG elements support the following attributes:
- src
- This attribute is required for every IMG element. It
specifies a URL for the image resource, for instance a GIF, JPEG or PNG
image file.
- alt
- This is used to provide a text description of the image and
is vital for interoperability with speech-based and text only
user agents.
- align
- This specifies how the image is positioned relative to the current
textline in which it occurs:
- align=top
- positions the top of the image
with the top of the current text line. User agents vary in how they
interpret this. Some only take into account what has occurred on the
text line prior to the IMG element and ignore what happens after it.
- align=middle
- aligns the middle of the image with the baseline for the
current textline.
- align=bottom
- is the default and aligns the bottom of the image with the baseline.
- align=left
- floats the image to the current left margin, temporarily changing
this margin, so that subsequent text is flowed along the image's
righthand side. The rendering depends on whether there is any left
aligned text or images that appear earlier than the current image in the
markup. Such text (but not images) generally forces left aligned images
to wrap to a new line, with the subsequent text continuing on the former
line.
- align=right
- floats the image to the current right margin, temporarily changing
this margin, so that subsequent text is flowed along the image's
lefthand side. The rendering depends on whether there is any right
aligned text or images that appear earlier than the current image in the
markup. Such text (but not images) generally forces right aligned images
to wrap to a new line, with the subsequent text continuing on the former
line.
Note that some browsers introduce spurious spacing with multiple left
or right aligned images. As a result authors can't depend on this being
the same for browsers from different vendors. See
BR for ways to control text flow.
- width
- Specifies the intended width of the image in pixels. When given
together with the height, this allows user agents to reserve screen
space for the image before the image data has arrived over the network.
- height
- Specifies the intended height of the image in pixels. When given
together with the width, this allows user agents to reserve screen space
for the image before the image data has arrived over the network.
- border
- When the IMG element appears as part of a hypertext
link, the user agent will generally indicate this by drawing a colored
border (typically blue) around the image. This attribute can be used to
set the width of this border in pixels. Use border=0 to
suppress the border altogether. User agents are recommended to provide
additional cues that the image is clickable, e.g. by changing the mouse
pointer.
- hspace
- This can be used to provide white space to the immediate left and
right of the image. The HSPACE attribute sets the width of
this white space in pixels. By default HSPACE is a small
non-zero number.
- vspace
- This can be used to provide white space above and below the image
The VSPACE attribute sets the height of this white space
in pixels. By default VSPACE is a small non-zero number.
- usemap
- This can be used to give a URL fragment identifier for a client-side
image map defined with the MAP element.
- ismap
- When the IMG element is part of a hypertext link, and
the user clicks on the image, the ISMAP attribute causes
the location to be passed to the server. This mechanism causes problems
for text-only and speech-based user agents. Whenever its possible to
do so use the MAP element instead.
Here is an example of how you use ISMAP:
<a href="/cgibin/navbar.map"><img src=navbar.gif ismap border=0></a>
The location clicked is passed to the server as follows. The user
agent derives a new URL from the URL specified by the HREF
attribute by appending `?' the x coordinate `,' and the y coordinate of
the location in pixels. The link is then followed using the new URL. For
instance, if the user clicked at at the location x=10, y=27 then the
derived URL will be: "/cgibin/navbar.map?10,27". It
is generally a good idea to suppress the border and use graphical idioms
to indicate that the image is clickable.
Note that pixel values refer to screen pixels, and should be
multiplied by an appropriate factor when rendering to very high
resolution devices such as laser printers. For instance if a
user agent has a display with 75 pixels per inch and is rendering
to a laser printer with 600 dots per inch, then the pixel values
given in HTML attributes should be multiplied by a factor of 8.