HTML Encyclopaedia

The map and area tags

The <map> tag is used in conjunction with the usemap attribute of the <img> tag and the <area> tag. This combination supports the technique known as a client side map, i.e. a map in which all the active zone information is included in the document HTML so that there is no need for the browser to transmit coordinates to the server.

The basic syntax is in three parts.

1. The usemap attribute of the <img> tag.

   This is used to associate the map image with the list of active zones. The value of the attribute is the URL fragment identifier (or anchor) associated with the active zone list via the <map> tag's name attribute.

   It is suggested, in some sources, that the value of the attribute could be a full URL although most browsers are unlikely to support this.

2. The <map> tag.

   This container tag is used to enclose the list of active zones. It has a single attribute name whose use is described above.

3. The <area> tag

   This tag is used to specify a active zone on the image. A <map> ... </map> container can enclose as many <area> tags as necessary. The effect of enclosing anything else within a <map> ... </map> container is undefined.

   The <area> tag has five attributes.

   1. The shape attribute.

      There are four possible values defined for this attribute, rectangle, circle, polygon and default. The first three define the shape of a active zone. The final value is a "catch-all" for parts of the image that are not otherwise active. If this attribute is not set, rect is assumed by default.

   2. The coords attribute.

      This attribute defines the active zone. The value will be a comma (and white space) separated list of numbers that are either pixel coordinates or percentages of the image width/height. The interpretation of the values is as follows.

      shape	Number of values	Interpretation
      rect	4	x-left, y-upper, x-right, y-lower
      circle	3	x-centre, y-centre, radius
      poly	An even number >= 6	x1,y1,x2,y2,x3,y3 ...

      In the case of a polygon, closure is assumed, i.e. the polygon is closed by a line from the last co-ordinate pair to the first pair. If the defined regions overlap, then, in examining the list of regions the browser will accept the first it encounters working from the start of the <map> ... </map> container.

   3. The alt attribute.

      This associates text with the indicated part of the image in a manner similar to the alt attribute of the <img> tag.

   4. The href attriubte.

      This associates a URL with the region in question.

   5. The nohref attribute.

      This indicates that there is no URL associated with an area. It may be used to "punch a hole" in a region.

Here's an example of a client side. You can click on any of the coloured shapes.

and here's the HTML of the above example.

<img src=map1.gif usemap="#map1">
<map name="map1">
<area nohref alt="Hole in Red Rectangle" shape=rect coords="79,43, 311,90">
<area href=map.rec1.html alt="Red Rectangle" shape=rect coords="69,33, 321,100">
<area href=map.rec2.html alt="Green Rectangle" shape=rect coords="41,121, 97,304">
<area href=map.circle.html alt="Blue Circle" shape=circle coords="188,183,52">
<area href=map.star.html alt="Orange Star" shape=poly coords="246,215, 281,203, 295,156, 314,193, 
	359,179, 324,218, 351,274, 299,245, 255,292, 273,231">
<area href=map.back.html alt="Image Background" shape=default>
</map>

There is no need for the <map> ... </map> container to appear immediately after the <img> tag. The anchor "map1" serves to tie them together so the <map> ... </map> container may appear anywhere in the page, even before the associated <img> tag.

In the above example note that the nohref attribute is used to "punch a hole" in the sensitive red rectangle so that only the margin of the rectangle is sensitive. The central area does not even revert to the value associated with the shape=default attribute. If your browser does not display the text associated with the alt tag when you move the cursor over parts of the map watch the cursor change shape as you move over the hole in the red rectangle.

In the example above no fewer than ten co-ordinate pairs were required to define the orange star, one at each point where the perimeter changed direction. It is, of course, quite possible to define the star using only five co-ordinate pairs in the order indicated in the diagram below. This image of the star is also an active client side map, however the algorithms used by most browsers to determine whether a point is inside a polygon are completely defeated by this order of point definition. Only the ARA browser handled this correctly.

Here's the HTML associated with the above

<img src=map2.gif usemap="#map2>
<map name="map2">
<area href=map.star.html shape=poly coords="3,69, 116,33, 12,145, 51,9, 108,127">
</map>

Browsers

ARA, IE3, IE4, NN3, NN4 and OP2 all handled the basic client side map correctly. No browser handled the alt attribute of the <area> tag correctly. IE3 and IE4 didn't handle the default value of the shape attribute.