HTML 4.0 Sourcebook:HTML in Detail

To access the contents, click the chapter and section titles.

HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Table of Contents

Figure 6.43 HTML example document illustrating the IMG inline image element. Figure 6.44 shows this document as displayed by the Netscape Navigator browser.

<HTML>
<HEAD>
<TITLE> Example of IMG Element </TITLE>
</HEAD>
<BODY>
<H1>Examples of IMG Elements</H1>

<P> <IMG SRC="icon-help.gif" ALT="[Test image]" ALIGN=TOP> Here is
some text related to the test image.   The text is aligned with the
top of the image. Note that the text does not flow around the image.

<P> <IMG SRC="icon-help.gif" ALT="[Test image]" ALIGN=MIDDLE> Here is
some text related to the test image.   The text is aligned with the
middle of the image. Note that the text does not flow around the image.

<P> <A HREF="http://www.bozo.edu/test.html"><IMG SRC="icon-help.gif"
ALT="[Test image]" ALIGN=BOTTOM> Here is some text</A>  related
to the test image.   The text is aligned with the bottom of
the image, and is also part of the <EM> hypertext link</EM>.

<P>  Here is a <IMG SRC="icon-help.gif" ALT="" ALIGN="left">
left-aligned image. Note how the text flows around this image,
unlike the top, middle and bottom aligned images shown above. The
element <CODE>&lt;BR CLEAR="left"></CODE> (there is one just
coming up, right after the closing bracket....)
<BR CLEAR="left">
(....there it was) creates a line break that clears the text to
follow the left-flushed image.
</BODY>
</HTML>

HEIGHT=“number,” “real%” (optional) Specifies the height of the image to be displayed—a browser will scale the image to fit this height if the image is actually a different size. Percentage heights are calculated relative to the available space; thus, if the image is inside a table cell, this should be a percentage of the table cell’s height. Unfortunately, when percentage heights are used on an IMG element, Netscape Navigator 3/4 and Internet Explorer 4 improperly render the element when it is placed inside a table cell. Thus, percentage values should be avoided on IMG elements used within table cells.

Figure 6.44 Display, by the Netscape Navigator 3 browser, of the document shown in Figure 6.43.

If only one of HEIGHT or WIDTH is specified, then the entire image is resized, with the aspect ratio (ratio of height to width) kept constant—thus the image is not distorted. However, an author can use specific HEIGHT and WIDTH values to stretch and distort an image to any desired size. This is commonly used, with a transparent 1 pixel by 1 pixel image, to create fixed-width table columns.

The use of HEIGHT is illustrated in Figures 6.45 and 6.46.

HSPACE=“number” (optional; floated images only) Specifies, in pixels, the horizontal space to be left between a floated image and the surrounding text. Note that this spacing is added both to the left and the right of the image. Finer control of spacing is provided by the style sheet padding property. Indeed, HTML 4 recommends dropping the HSPACE attribute in favor of using style sheet properties to control spacing and image positioning. The use of this attribute is illustrated in Figures 6.45 and 6.46.

ISMAP (optional) Denotes the image as an active image: When the user clicks the mouse over the image, the coordinates of the mouse pointer are measured by the browser. The ISMAP-activated IMG element must, consequently, be enclosed within an anchor element, specifying the URL to which the data should be sent. Typical markup for an active image is:

<A HREF="http://www.utirc.ca/cgi-bin/imagemap/map_bozo">

Figure 6.45 Example HTML document illustrating IMG border, image size rescaling, and spacing control. Browser rendering of this document is shown in Figure 6.46.

<HTML>
<HEAD>
<TITLE> More Examples of IMG Elements </TITLE>
</HEAD>
<BODY>
<H2 ALIGN="center"> More Examples of IMG Elements</H2>

<P>Here is a left-aligned image
<IMG SRC="icon-help.gif" ALT="[Test image]" ALIGN="left"> with
text flowing around it.  Note how tight the text is to the image.
The next example has attributes <B>HSPACE</B>="15" and
<B>VSPACE</B>="15": <BR CLEAR="all">

<P>Here is a left-aligned image
<IMG SRC="icon-help.gif" ALT="[Test image]" ALIGN="left"
HSPACE="15" VSPACE="15"> with text flowing around it.
Note how there is extra space around the image, due
to the <B>HSPACE</B> and <B>VSPACE</B>
attributes added to the IMG element. <BR CLEAR="all">

<P>Here is a right-aligned image
<IMG SRC="icon-help.gif" ALT="[Test image]" ALIGN="right"
HEIGHT="60" WIDTH="120"> with the image size rescaled
using the <B>HEIGHT</B> and <B>WIDTH</B> attributes.
Note that you <EM>must not</EM> use these attribute to
resize imagemapped images.
<BR CLEAR="all">

<P>Here are three images inside anchor elements:
Note how the <B>BORDER</B> attribute controls the
border drawn around the images</P>
<CENTER>
<TABLE WIDTH="60%" CELLPADDING=5>
<TR>
  <TD ALIGN="center"> No Specification
  <TD ALIGN="center"> <TT>BORDER="0"</TT>
  <TD ALIGN="center"> <TT>BORDER="8"</TT>
</TR>
<TR>
  <TD ALIGN="center"><A HREF="icon-help.gif"><IMG SRC="icon-help.gif"
			ALT="[Test image]"></A>
  <TD ALIGN="center"><A HREF="icon-help.gif"><IMG SRC="icon-help.gif"
			ALT="[Test image]" BORDER="0"></A>
  <TD ALIGN="center"><A HREF="icon-help.gif"><IMG SRC="icon-help.gif"
			ALT="[Test image]" BORDER="8"></A>
</TR>
</TABLE>

</CENTER></BODY></HTML>     <IMG  SRC="bozo.gif" ISMAP>

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.