Area
In Hypertext Markup Language (HTML), area is a tag used to define a region within an image map. It must be enclosed within a set of <map></map> tags. The most common attributes used with area tag include shape, coords, href, and alt. These are shown with their possible values in the below table.
| Attribute | Purpose | Possible Values |
|---|---|---|
| shape | Defines the type of shape to be used to describe a region within the image. | rect, circle, poly, default rect will draw a rectangle, circle a circle, poly a polygon, and default uses the entire image. |
| coords | Defines the coordinates that are used to draw the defined shape as a region of the image. | Numbers as coordinates, separated by commas (,). The coordinates 0,0 (x=0, y=0) refer to the top-left corner of the image. For rect, you use x1, y1, x2, y2. x1 and y1 are the coordinates of the top-left corner of the rectangle, and x2, y2 are the coordinates of the bottom right corner of the rectangle. For circle, you use x, y, r. x and y are the coordinates of the center of the circle, while r is the value of the radius. For a polygon, you include x and y coordinates for each edge point of the polygon. The first and last coordinates should match, but if they do not the browser will draw the last line back to the first edge point. |
| href | Defines the URL (Web address) that the defined region links. | Valid URL/Web Address. |
| alt | Defines alternative text for the defined region of the image. | Text. |
An example of the code for an image map is shown below, using the area tag and rectangles for the shapes.
<img src="graph.jpg" width="200" height="150" alt="Graph" usemap="#graphmap">
<map name="graphmap">
<area shape="rect"
coords="0,75,50,150" href="yes.htm" alt="Yes">
<area shape="rect" coords="60,75,110,150" href="no.htm" alt="No">
</map>
This would display an image map like the one below, with the areas defined for the "Yes" and "No" bars. Moving the mouse over the "Yes" or "No" bar will allow you to click a link to a "yes" or "no" feedback page on Computer Hope.
Also see: HTML