[Contents] [Previous] [Next] [Alphabetical Tag List] [Index]

HTML Tag Reference

Images and Image Maps

 This section discusses the tags for inserting an image into a document and for creating image maps. An image map is an image that contains one or more areas that the user can click to open another URL.

For general information about image maps, see

IMG

(image)

 The IMG tag specifies an image to be displayed in an HTML document.

An image can be a plain image that simply appears on the page. An image can be embedded in an <A HREF> tag so that the user can click it to open a URL. An image can also be an image map, which has multiple clickable areas that each link to different URLS. For more information on image maps, see the section "Image Maps."

The SRC attribute of the IMG tag indicates the image to display. You can also specify a lower resolution image as the value of the LOWSRC attribute. When the page opens, it displays the lower resolution image first, so that the user has something to look at while the real image is loading. If you supply an image for the LOWSRC attribute, make sure it has a smaller file size than the image used for the SRC attribute, since the whole point of the LOWSRC attribute is to provide an image that loads more quickly than the source image.

The HEIGHT and WIDTH attributes indicate the dimensions of the image. If you specify these attributes, Navigator uses them to reserve a place for the image on the page and continues loading any text and other page elements instead of waiting for the image to load.

Navigator can display images that use the following types of formats:

Syntax

 
<IMG 
  SRC="location" 
  LOWSRC="location" 
  ALT="alterntiveText" 
  ALIGN="alignment"
  BORDER="borderWidth"
  HEIGHT="height"
  WIDTH="width"
  HSPACE="horizMargin"
  VSPACE="verticalMargin" 
  ISMAP 
  USEMAP="#mapName"
  NAME="imageName"
  ONABORT="imgLoadJScode"
  ONERROR="errorJScode"
  ONLOAD="imgLoadJScode"
  SUPPRESS="suppressOrNot"
>
 The SRC attribute is required.

SRC="location"

specifies the URL of the image to be displayed in the document.

LOWSRC="location"

specifies the URL of a low-resolution version of the image. This image is displayed while the image specified by the SRC attribute is loading. The idea of the LOWSRC image is that it takes up less file space than the SRC image and thus loads more quickly, giving the user something to look at while the real image is loading.

ALT="alternativeText"

specifies text to be displayed if the browser does not support the IMG tag or if the user has suspended image loading in the browser.

ALIGN

specifies the alignment of the image in relation to the surrounding text. If you do not specify a value for ALIGN, Navigator uses BOTTOM as the default. Navigator 1.1

BORDER="borderWidth"

specifies the width, in pixels, of a border around the image. The value must be an integer. Navigator 1.1

HEIGHT="height"

specifies the height of the image, either in pixels or as a percentage of the height of the window, frame, or positioned block of HTML that contains the image. To indicate a number of pixels, specify the value as an integer, for example, "100". To indicate a percentage, specify the value as an integer followed by the percentage sign, for example "20%". Navigator 1.1.

WIDTH="width"

specifies the width of the image either in pixels or as a percentage of the window, frame, or positioned block of HTML containing the image. To indicate a number of pixels, specify the value as an integer, for example, "100". To indicate a percentage, specify the value as an integer followed by the percentage sign, for example, "20%". Navigator 1.1.

HSPACE="horizMargin"

specifies a margin in pixels between the left and right edges of the image and surrounding text and images. Give the value as an integer. Navigator 1.1.

VSPACE="verticalMargin"

specifies a margin in pixels between the top and bottom edges of the image and surrounding text and images. Give the value as an integer. Navigator 1.1.

ISMAP

indicatets that the image is a server-side image map. If it is, the image should be embedded inside an <A HREF> link that points to the mapping file. See the section "Image Maps" for more information about server-side image maps.

USEMAP="#mapName"

specifies that the image is a client-side image map and indicates which MAP tag defines the mapping for this image. See the section "MAP" for more information on client-side image maps.

NAME="imgName"

specifies a name by which JavaScript can refer to the image.

ONABORT="imgAbortJScode"

specifies JavaScript code to execute when the user terminates the loading of an image. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.

ONERROR="errorJScode"

specifies JavaScript code to execute when an error occurs during image loading such as if the URL within the <IMG> tag is bad or the image data is corrupted.

ONLOAD="imgLoadJScode"

specifies the JavaScript event handler to execute when the image is loaded.

SUPPRESS="suppressOrNot"

specifies whether or not the place-holder icon that appears during image loading will be displayed and if the tool tip will be active. If the tool tip is active, any text specified in the ALT attribute is displayed if the mouse rests over the image. The default value is FALSE. Navigator 4.0

The value of SUPPRESS can be TRUE or FALSE.

Note, however, that if the user has set up the browser so that it does not automatically load images, the placeholder icon appears, regardless of the setting of the SUPPRESS attribute.

Example 1. An Image With a Low Resolution Placeholder

 
<IMG SRC="images/violets.jpg"
 LOWSRC="images/smviol.gif"
 HEIGHT=180 WIDTH=120
 ALT="violets">
 This example uses the following attributes to improve performance:

The file images.htm shows this example in action in a separate window.

Example 2. An Image with Text Wrapping Around It

In this example, an image is aligned on the right side of the Navigator window, and text flows around it to the left:

<P><IMG SRC="images/spikey.jpg"
 SUPPRESS=TRUE ALIGN=RIGHT HSPACE=40 BORDER=2
 ALT="chrysanthemum">
Chrysanthemums are easy to grow, so long as you can keep the slugs and snails off them. They do very well in the fall, and there is nothing more beautiful than a large bed of chrysanthemums of all colors.
</P>
<BR CLEAR=ALL>
In this example, the HSPACE attribute creates a 40-pixel margin on either side of the the image, and the image is aligned on the right. Text wraps around the image to the left.

The file images.htm shows this example in action in a separate window.

AREA

(area of image map)

 The AREA tag describes an individual area in an image map. An image map can contain multiple clickable areas, and each area can have a separate destination URL associated with it. See the section "Image Maps" for more information about image maps.

The AREA tag must be used inside a MAP tag. See the section "MAP" for details of the MAP tag.

Syntax

<AREA
  COORDS="coords"
  SHAPE="shape"
  HREF="location"
  NOHREF
  TARGET="windowName"
  ONMOUSEOUT="outJScode"
  ONMOUSEOVER="overJScode"
  NAME="areaName"
>

The COORDS attribute is required. Either the HREF or the NOHREF attribute must be supplied.

COORDS="coords"

specifies the coordinates of the area. Coordinates are measured from the upper left corner of the image. The format of the COORDS value depends on the value of the SHAPE attribute. If the SHAPE attribute is not specified, the shape is assumed to be a rectangle, and the COORDS value must be of the form "x1,y1,x2,y2". In this case, x1 and y1 are the x and y values of the upper left corner of the rectangle, and x2 and y2 are the coordinates of the lower left corner. See the discussion of the SHAPE attribute for details of the format of the COORDS value for each kind of shape.

SHAPE="shape"

specifies the shape of the map. Each shape has its own form of the COORDS attribute:

If you do not specify a value for SHAPE, the shape is assumed to be a rectangle.

HREF="location"

specifies the URL to invoke when a user clicks the area.

NOHREF

specifies that no URL is invoked when a user clicks the area.

TARGET="windowName"

specifies the frame or window into which the destination document is loaded, if the value of HREF is a URL that points to a document. Navigator 2.0.

See the description of special target values in the A as link section for a list of the pre-defined target values.

ONMOUSEOUT="outJScode"

specifies a JavaScript event handler to execute when a user moves the mouse cursor out of the image or link text. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.

ONMOUSEOVER="overJScode"

specifies a JavaScript event handler to execute when a user moves the mouse cursor over the image or link text.

NAME="areaName"

specifies the name of the AREA. This name can be used to access the AREA object from JavaScript.

Used Within

 MAP

Example

<AREA SHAPE=CIRCLE COORDS="50,50,25"
      HREF="http://home.netscape.com" >
<AREA SHAPE=RECT COORDS="50,50,100,100"
      HREF="http://developer.netscape.com" >
 For an example of the AREA tag inside a MAP tag, see the section "MAP."

The file images.htm opens in a new window and contains an example of a client side image map that uses the AREA tag.

MAP

(mapping information for image map)

 The MAP tag contains information about the active areas in an image map.

An image map is a graphic that can be divided into multiple areas, and each area of the map can point to a different URL. When a user clicks a specific area in the image map, Navigator loads the URL associated with the clicked area. (The section "Image Maps" has an illustration of an image map.)

There are two different kinds of image maps: server-side image maps and client-side image maps. For server-side image maps, the mapping information is written in a separate file that resides on the web server. See the section "Image Maps" for more information about server-side image maps.

For client-side image maps, the mapping information is contained in a MAP tag in the HTML file that contains the IMG tag. The MAP tag contains one or more AREA tags. Each AREA tag describes a different area in the image and specifies the URL to which it connects.

To define a client-side image map, use the IMG tag to specify the image and supply a value for its USEMAP attribute. The value of the USEMAP attribute must be the pound (#) sign, followed by the name of the MAP tag that contains the mapping information, for example,"#firstmap".

If the user clicks a point located in multiple overlapping areas, the area that is defined first in the MAP tag responds to the click.

Syntax

<MAP NAME="mapName">
  <AREA ...>
  ...
  <AREA ...>
</MAP>

The NAME attribute is required. Between the <MAP> and </MAP> tags you must put the AREA tags that define the areas in the image map.

NAME="mapName"

specifies the name of the map. Use this name preceded by # as the value of the USEMAP attribute of the IMG tag for the image map.

Example

 
<IMG SRC="images/shapes.gif" WIDTH=100 HEIGHT=100
    ALT="shapes" USEMAP="#mainmap" 
<MAP NAME="mainmap">
 <AREA SHAPE=CIRCLE COORDS="50,50,25"
      HREF="http://home.netscape.com" >
 <AREA SHAPE=RECT COORDS="50,50,100,100"
     HREF="http://developer.netscape.com" >
 <AREA SHAPE=RECT COORDS="0,0,100,100"
     HREF="http://developer.netscape.com/docs" >
</MAP>
 The file images.htm shows this example in action in a separate window.

Image Maps

An image map is a graphic that is divided into one or more areas, and each area of the map can point to a different URL. When a user clicks a specific area in the image map, Navigator invokes the URL associated with the clicked area. For example, an image could contain a circle and a square. When the user clicks the circle, one web page opens, and when the user clicks the square a different page opens.

Figure 1.    Different areas of an image map invoke different URLS

Image maps can be server-side or client-side image maps. The ISMAP attribute of the IMG tag indicates that the image is a server-side image map, while the USEMAP attribute indicates it is a client side image map. You can use both the ISMAP and USEMAP attributes to the IMG tag. If both are provided, USEMAP takes precedence. Not all browsers support client side image maps, so if possible, you should include both.

With a client-side image map, the information about what part of the image invokes which URL is contained in MAP and AREA tags in the HTML file, as discussed in the section "MAP."

With a server-side image map, the information about what part of the image invokes which URL resides in a separate mapping file on the web server. The format of the mapping file depends on the web server that is serving the web page. It is beyond the scope of this HTML reference to go into details on the subject; however there are some online tutorials for implementing server-side image maps.

For a tutorial about implementing server-side image maps for NCSA web servers, see:

http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html

For a tutorial on implementing server-side image maps for CERN web servers, see:

http://www.w3.org/Daemon/User/CGI/HTImageDoc.html .

You can also use JavaScript to define the behavior of server-side image maps. For details, see the section Using Server-Side Image Maps in the Advanced Topics chapter of the JavaScript Guide .

If the image uses a server-side image map, it must be embedded inside an <A HREF> tag whose URL points to a compiled mapping file. For example:

<A HREF="mappingfile.map">
<IMG SRC="navbar.gif" ISMAP>
</A>

[Contents] [Previous] [Next] [Alphabetical Tag List] [Index]

Last Updated: 01/26/98 21:33:44

Copyright © 1998 Netscape Communications Corporation