Alexander Spiteri's Home Page

HTML
 Client-side Maps
 
Introduction
 
Image maps allow users to access other documents just by clicking on different areas of an image.

Presently, image maps can be implemented in two separate ways:

  • Storing the image map information on a server - the Server-side maps.
  • Including this information on a HTML document - the Client-side maps.

This section documents only the second one, as Client-side image maps are easier to use and present to the Web developer some further advantages:

  • All the processing is made by the browser (the client), saving a round trip to the server, what should make the targeted document come up faster.
  • Due that the map information is, in most cases, stored in the current document, the browser is able to display the destination URLs in the status bar as the user passes the mouse over the image.
  • Last but not least, this feature doesn't take the permission of the Server administrator.
 
How to use it
 
To define the image map information in a document, you should use the MAP and AREA elements, which have the following functions and formats:

MAP - Defines the client-side image map.

<MAP NAME=...> ... </MAP>

AREA - Specifies the shape of each hotshot in the map.

<AREA [SHAPE=...] COORDS=... HREF=... [NOHREF] [TARGET=...]>

To define an image as a client-side map, use the USEMAP attribute of the IMG tag:

<IMG SRC=... USEMAP=...>

 
Examples
 
Here's a very simple example that illustrates how client-side maps work and how you can add them to your pages. On the left, there's the HTML code needed to make the map, on the right side, work:

 

<map name="Example"
<area shape="rect" coords="10,10,77,49" href="sample1.html#hot1">
<area shape="circle" coords="111,41,22" href="sample1.html#hot2">
<area shape="default" nohref>
</map>

<img src="sample1.gif" border=0 usemap="#Example">

Example Image Map
 

In this example, the image map defines 3 hot spots:

  • Hot Spot 1, the rectangular area in yellow, that maps to "sample1.html#hot1". The shape is defined as rect and, as coordinates, you must provide the left-top (10,10) and right-bottom (77,49) corners.
  • Hot Spot 2, the yellow circle, that maps to "sample1.html#hot2". The shape for a circle must be defined as circle and you must provide the coordinates of the center (111,41) and radius (22) of the circle.
  • The default area, in gray, defined my the shape default, that doesn't map to any document.

To get an idea of how the browser handles client-side maps, try clicking the image.

 
Related Topics
 
MAP element - AREA element - IMG element
 
Back to Alexander Spiteri's Home