The <area> Tag (XHTML Reference)

Introduction

The <area> tag is used to define a specific area in an image. The main usage of an area is to define one image with many areas. Each area can then have his own link to another page. Usually you can define only one link for the complete image, but the area tag is especially meant to divide an image in several parts so that you can use many links in one image. Just imagine that you have a map imagine from your country and would like to divide the image in several parts, so that the user can click on each city to get information. The <area> tag is always nested in a <map> tag and is never used standalone.

Example

<map name="MyRectArea">

<area shape="rect" coords="0,0,84,72" href="http://www.topxml.com/" alt="Link One">

<area shape="rect" coords="92,0,172,72" href="http://www.topxml.com/" alt="Link two">

<area shape="rect" coords="0,79,85,146" href="http://www.topxml.com/" alt="Link three">

<area shape="rect" coords="92,79,172,146" href="http://www.topxml.com/" alt="Link four">

</map>

<img src="area.jpg" usemap="#MyRectArea" border="0">

The above example created a map block called “MyRectArea” with the area tags. In the map I defined the necessary area tags and links. After that we closed the map tag and created an img tag with the image of a rect and used the usemap attribute to assign the map to the image.

Output

Construction