1. <map name="image">

   The paired tag, <map> and </map> opens and closes the map file. This tag takes one attribute, name, which is just what you would think it would be: what the map file is called. This is similar to the markup used in defining a target or anchor

2. <area shape="rect" alt="Rectangle" coords="10,8,260,58" href="rect.html">

   In this line the shape of the area is a rectangle. The coordinates which delineate the rectangle are 10, 8, (x and y pixel values for the upper left corner), and 260, 58 (x and y pixel values for the upper right corner).

   The alt attribute contains text which appears in place of the image for those using Lynx or for those who browse with their images turned off. In this case, it is alt="Rectangle".

   The AREA is linked to the address "rect.html" by the href attribute. "rect.html" is a file which is in the same directory as the html file with the image map.

3. <area shape="poly" alt="Polygon" coords="162,81,185,68,245,67,252,195, 211,235,188,237,166,241,134,235,158,190,162,80" href="polygon.html">

4. <area shape="circle" alt="Circle" coords="70,149,55" href="circle.html">

   The code for polygons and circles works in the same way as that of the rectangle. But, as you can see, the circle must have three coordinates while the polygon can have many coordinates.

   Note that these coordinates must all be on the same line so when you read the document source with the map file in it you will need to scroll sideways!

5. <area shape="rect" alt="Default document" coords="0,0,268,249" href="other.html">

   This last AREA element defines the default zone, or all the space around the active areas of the image. The coordinates for the default zone are actually the outline of the entire image but because this definition appears after the other area elements, the earlier elements take precedence.

Close this page to return to the imagemapping page.