The IMG element

contents introduction reference index previous next

HTML 4 - User's Guide
The IMG element

Contents:

1. SAMPLES 1.1 An old style page with images Image identification Image placement Image scaling Fallback information 1.2 Image placement using the float property 1.2.1 The style sheet 1.2.2 The class attribute 1.2.3 Other attributes 1.3 Sensitive image 1.4 Server side image 1.5 Further examples
2. USAGE 2.1 Image presentation 2.1.1 Image placement 2.1.2 Image scaling 2.1.3 Image margins and borders 2.2 Client side versus server side 2.3 Supported formats
3. SYNTAX: 3.1. Overview
3.2. Attributes

The <IMG> element defines an image. It is deprecated and replaced by the <OBJECT> element. But it is still useful because older browsers still in use don't support the latter. Moreover, sensitive server side images can only be defined by the IMG element. The newer OBJECT-defined images cannot be server side, may be because this is not recommended.

1. SAMPLES

1.1 An old style page with images

Here is a sample HTML page coded in the old style. The IMG elements stand out in blue.

<HTML>
<HEAD>
<TITLE>TULIP</TITLE>
</HEAD>
<BODY bgcolor="aqua">
<center><b><font color="red" size="+1">TULIPS</font></b></center>
<IMG src="../Images/tulip_1.jpg" align="left" width="200" alt="TULIP">
The tulip is a bulbous plant of the genus <i>Tulipa</i> of the family <i>Liliaceae</i>. Its 
name derives from the Turkisk word <b>tulbend</b> which derives from the Persian 
<b>dulband</b> meaning <i>turban</i>,<IMG src="../Images/tulipField.jpg" align="right" 
height="190" alt="TULIP FIELD"> from the shape of the expanded flower.<br>
It is cultivated on a large scale in Holland where its culture accounts for a sizable part
of the national product.<br>
Worlwide tulips are cultivated as garden flowers.
</BODY>
</HTML>

To see how the page is displayed, please click here".

1.1.1 Image identification
The src attribute specifies the URI of the image. In the example the images are in the local machine; the URIs ("../Images/tulip_1.jpg" and "../Images/tulipField.jpg") are the files relative directory paths.

1.1.2 Image placement
The <IMG> element can be inserted anywhere in the text. It is placed against the left side of the page by the "left" value of the "align" attribute; the line where the image starts is the first one with sufficient space after the point where the <IMG> element is inserted. The value "right" of attribute "align" places the image against the right border of the page.

1.1.3 Image scaling
The attributes "width" and "height" set the size of the image. You need specify only one of the dimensions. The image is scaled to that dimension, with the other dimension automatically adjusted to preserve the original proportion.

1.1.4 Fallback information
The "alt" attribute defines the information that will be displayed if the browser cannot render the image defined by the src attribute. These are "TULIP" and "TULIP FIELD" in the above examples.

1.2 Image placement using the float property

This example shows how the image can be placed using the style sheet.

<HTML>
<HEAD>
<TITLE>THE MOON</TITLE>
<LINK rel="stylesheet" type="text/css" href="../styles/HatayBook.css">
<STYLE>IMG.left {float:left; margin-bottom:1em; margin-right:1em;}</STYLE>
</HEAD>
<BODY>
<b>TO THE MOON</b>
<p>
<IMG src="../Images/MoonLandscape.bmp"
class="left" width="150" height="125" alt="Moon landscape">
Art thou pale for weariness<br>
Of climbing heaven and gazing on the earth,<br>
Wandering companionless<br>
Among the stars that have a different birth, --<br>
And ever changing, like a joyless eye<br>
That finds no object worth its constancy?
<p>
<TABLE>
<TR><TD width="50%"><TD><b>Percy B. Shelley</b>
</TABLE
</BODY></HTML>

To see how the page is displayed, please click here.

1.2.1 The style sheet
In the present case, the style sheet is the content of element <STYLE> which is in the content of element <HEAD>, along with the <TITLE> and <LINK> elements. In this style sheet:

IMG.left	identifies the elements concerned by the properties defined within the curly braces `{ .. }`; these are all the <IMG> elements with the attribute `class="left"`
The properties defined within the curly braces are:
float	with the value "left; this causes the image (defined by an "IMG" element with class="left") to be 'floated' to the left, against the page left border, and let the text flow to its right
margin-bottom	with the value "1em", which means 1 line height, gives the image a bottom margin a thickness equivalent to one displayed line; looking at the displayed image, you will see that this is used to prevent the author name, Percy B. Shelley, from coming under the image.
margin-right	with the value "1em", gives the image a right margin a thickness equivalent to one displayed line, separating it from the text to its right
More on style sheet is to be found on the ad hoc document

1.2.2 The class attribute
The class attribute (class="left") define a class of <IMG> elements; this class is referenced in the style sheet by the name of the element ("img"), with the class name ("left" in the present example) appended to it with a connecting dot ("img.left").

1.2.3 The other attributes
The other attributes was already seen in the above example.

1.3 Sensitive image

This is an example of a page with a sensitive (client side) image.

<HTML>
<HEAD><TITLE>THE COCK</TITLE></HEAD>
<BODY>
  <MAP name="cock">
    <AREA shape="circle" coords="96,90,20" href="ILLcock.html">
    <AREA shape="rectangle" coords="70,0,158,30" href="../Images/Hose-pipe.html">
    <AREA shape="polygon" coords="150,0,170,0,225,192,192,192" href="../Images/bamboos.jpg">
  </MAP>
  You can click on the cock, the bamboo stalk or the pipe-hose<br>
  <IMG src="../Images/cock.jpeg"
       width="250"
       height="192"
       usemap="#cock"
       alt="A cock"
  >
</BODY>
</HTML>

The image is displayed as this:

THE COCK You can click on the cock, the bamboo stalk or the pipe-hose
A cock

The map is defined by the <AREA> elements in the content of the MAP element.
The name="cock" attribute assigns the name "cock" to the map.

The image is defined by the <IMG> element which references the "cock.jpg" image file contained in directory "Images".
The usemap="#cock" relates the image to the map named "cock" -- note the "#" sign added ahead of the name. This relation maps the figures defined in the map to figures in the image:

-	the circle, that maps onto the figure of the cock, is linked to HTML page "HTMLcock.html"; a click on the cock will cause this page to be displayed
-	a rectangle, that maps onto the coil of hose-pipe, is linked to HTML page "HTMLhose-pipe.html"; a click on the hose-pipe coil will cause this page to be displayed
-	a polygon, that maps onto the bamboo stalk, is linked to image file "bamboos.jpg", contained in the "Images" directory whose relative URI is "../Images/bamboos.jpg"; a click on the bamboo stalk will cause this image to be displayed.

1.4 Server side image

This example defines a server side image.

<TABLE><TR><TD>
   <A href="http://127.0.0.1:21000/books/HTML/Here">
        <IMG ismap src="../Images/apple.bmp">
   </A>
<TD>
Please <b><font color="blue">CLICK ON ANY POINT</font></b> of the image<br>
The PIXEL COORDINATES of the point where you click will be sent to the server
</TABLE>

The page will show as this:

Please CLICK ON ANY POINT of the image
The PIXEL COORDINATES of the point where you click will be sent to the server

The IMG element is set in the contents of an A element, and is marked with the ismap attribute. A click on any point in the image will send the pixel coordinates of the point to the internet address specified by the href attribute of the A element. A Web Server is expected to be waiting for information at this address.

In the above example, the specified Internet address is port 21000 of the local host.

In the classes/web directory, we have a JAVA class that monitors this port, and writes out information received there, both to the current window, and to a file called form.txt, in the same directory. To see this information, before clicking on the image, you can run this class which is named web.MyServer:

java web.MyServer

1.5 Further examples

A further examples of using the <IMG> element is in the SampleObject-1b.html file.

2. USAGE

2.1 Image presentation

2.1.1 Image placement

By default, image is placed in-line with the surrouding text; e.g. these lines:

This is an in-line image. <IMG src="../Images/flower_2.jpg" width="210" height="160">It 
heightens the line to its height, and is placed in the flow.

will generate the following display:

This is an in-line image. It heightens the line to its height, and is placed in the flow.

The image and the surrounding text are placed in a single heightened line.

To place the image to the left or to the right of the display space (which can be the page or a cell in a table -- as defined by the <TD> element), and let the surrounding text flow on its side, you can use:
- the IMG element align attribute (deprecated)
- or the float property in the style sheet

The align attribute can have the values:
- "left", to place the image against the left border -- align="left"
- "right", to place the image against the right border -- align="right"

The float property can have the values:
- "left", to place the image against the left border
- "right", to place the image against the right border

Practically, a property must be defined for a class of <IMG> elements.
For example, one class named "left" (<IMG class="left" ...>) will be placed left, by the property:
img.left {float: left; }

2.1.2 Image scaling

Scaling is achieved through the "width" and "height" attributes. When these attributes are specified, the width and height of the image are set to the specified values.
When only one of the dimension is specified, the other is adjusted in proportion.

2.1.3 Image margins and borders

The margins are free space that borders the image on the 4 sides. The borders are the lines that border the image, on the inner side of the margins. These are defined for data boxes in general.

The margins are defined by the "margin", "margin-top", "margin-right", "margin-bottom" and/or "margin-left" properties. The "margin" property set the same value to all of the margins; each of the margin-top, margin-right, etc... properties set a value for the margin on one particular side.

The borders are defined by the "border", "border-top", "border-right", "border-bottom" and/or "border-left" properties. The "border" property set the same appearance to all of the borders; each of the border-top, border-right, etc... properties set an appearance for the border on one particular side.
A border can have a set of three values:
- the thickness
- the style
- the color
A border property can set all of the three values, as in:
img.xxxx {border: thick solid red; }
or some of them, the remaining have default values (the term "initial" is to be preferred to "default"):
img.xxxx {border: red; }

2.2 Client side versus server side

A click on a client side (sensitive) image is handled by the client browser; a client side image is associates with a map which relates figures of the image to target pages; the browser will load the target page associated to the clicked on figure. A click on a server side image is to be handled by the server; the browser will send the pixel coordinates of the clicked point to the server; it is up to the user to set up a process on the server side to handle the reveived information.

Client side (sensitive) images are defined by the usemap attribute that references a map:
<IMG usemap="#xyzmap" src="image_uri">

Server side (sensitive) images are specified by the ismap attribute that has no value; its presence signals a server side map; the IMG element must be placed in the contents of an A element which defines the address where the information is to be sent:

`<A href="server_uri">`
	`<IMG ismap src="image_uri">`
`</A>`

2.3 Supported formats

The IMG element support image formats such as implied by the extensions:
- .art
- .bmp
- .gif (pronounced "jif")
- .jpeg
- .jpg
- .png (pronounced "ping")

3. SYNTAX

3.1 Overview

An <IMG> element has the general format:

<IMG attributes-and-values>

with no end tag </IMG>.

3.2 Attributes

The usual attributes are:

src	specifies a URI that locates the file containing the image
alt	specifies a text that will be displayed in place of the <IMG> element when the browser cannot render the image specified by the src attribute -- optional but recommended
width	specifies the pixel width of the image -- if omitted: the width is proportioned to the height (if both are omitted: the original width is retained)
height	specifies the pixel height of the image -- if omitted: the height is proportioned to the width (if both are omitted: the original height is retained)
usemap	specifies a map that causes the image to be sensitive; the map must be defined with <AREA> elements (not with <A> elements) -- the image is client side
ismap	indicates that the image is server side sensitive.
class	specifies the class of the <IMG> element (used in connection with a style sheet)

contents introduction reference index previous next