Area Shape HTML Tutorial For Beginners: Get The Code Now
- Attribute of
- <area> HTML Tag
- What does
Area Shape HTML Tutorial For Beginners: Get The Code Nowdo? - In conjunction with the coords attribute, specifies the shape, size, and placement of a clickable area in an image map.
Contents
Code Example
<img src="/wp-content/uploads/shapes.png" usemap="shapes-map">
<map name="shapes-map">
<area shape="rect" title="Square" coords="19,28,222,228" href="/wp-content/uploads/square.png" target="_blank" />
<area shape="circle" title="Circle" coords="361,132,96" href="/wp-content/uploads/circle.png" target="_blank" />
</map>
Specifying the shape of an <area> element
In order to specify the shape of an area element, you need two things — the shape attribute and the coords attribute. The two attributes work together — the shape attribute defines how the coords attribute should be interpreted.
Rectangles
If the shape attribute is set to rect, the coordinates define the top-left and bottom-right of the rectangle. There should be four numeric values, separated by commas. The first two values are the (x, y) coordinates of the first corner. The third and fourth numbers are the (x, y) coordinates of the second corner.
<img src="/wp-content/uploads/shapes.png" usemap="shapes-map-rect"> <map name="shapes-map-rect"> <area shape="rect" title="Square" coords="19,28,222,228" href="/wp-content/uploads/square.png" target="_blank" /> </map> In the example above, the top-left corner of the square is at (19, 28), and the lower-right corner is at (222, 228).
Coordinates for Circles
If the shape attribute is set to circle, the coordinates define the center of the circle and the length of its radius. There should be three numeric values, the first indicating the (x, y) coordinates of the circle’s center, and the third specifying the radius in pixels.
<img src="/wp-content/uploads/shapes.png" usemap="shapes-map-circle"> <map name="shapes-map-circle"> <area shape="circle" title="Circle" coords="361,132,96" href="/wp-content/uploads/circle.png" target="_blank" /> </map> In the above example, the circle is centered at (361, 132), and the radius of the circle is 96 pixels.
Coordinates for Polygons
If the shape attribute is set to poly, the coordinates define an arbitrary number of points which form a free polygon. This can be used to create any shape, including very complex shapes. There should be an even number of coordinate values, each separated by a comma. Each pair of numbers defines the (x, y) coordinates of a point on the image. These points are all vertices of the polygon.
<img src="/wp-content/uploads/flamingo.jpg" alt="" usemap="#flamingo-map" /> <map name="flamingo-map" id="flamingo-map"> <area alt="Flamingo." title="Flamingo." href="/wp-content/uploads/just-flamingo.jpg" target="_blank" shape="poly" coords="103,421,633,423,601,389,575,356,532,334,511,322,475,305,447,288,443,263,436,215,424,180,427,144,430,117,427,94,421,66,407,46,386,34,363,22,352,22,343,20,329,20,308,24,291,33,272,53,254,79,240,113,229,154,226,190,226,265,225,288,199,304,177,323,165,334,143,361" /> <area alt="Not the Flamingo." title="Not the Flamingo." href="/wp-content/uploads/no-flamingo.jpg" target="_blank" shape="poly" coords="1,5,6,418,95,418,133,361,152,335,176,312,194,298,213,286,213,231,215,192,222,156,231,118,237,97,252,68,266,46,280,30,295,23,314,20,330,18,348,16,360,16,377,20,396,32,412,39,417,46,422,53,426,63,431,74,432,84,432,93,432,108,434,124,434,138,433,150,430,167,430,174,431,182,435,193,442,203,443,223,452,283,575,348,583,352,637,417,635,4" /> </map> 
Default Area
There is one case where coords is not needed — when shape is set to default. The default value is used for any area that is not defined by another <area> — most often, it is used to add a link to the background of an image. The default area should be listed last within the <map> element, because the browser will start looking for the link at the beginning of the list and stop when it finds a match.
<img src="/wp-content/uploads/flamingo.jpg" alt="" usemap="#flamingo-map-with-default" /> <map name="flamingo-map" id="flamingo-map-with-default"> <area alt="Flamingo." title="Flamingo." href="/wp-content/uploads/just-flamingo.jpg" target="_blank" shape="poly" coords="103,421,633,423,601,389,575,356,532,334,511,322,475,305,447,288,443,263,436,215,424,180,427,144,430,117,427,94,421,66,407,46,386,34,363,22,352,22,343,20,329,20,308,24,291,33,272,53,254,79,240,113,229,154,226,190,226,265,225,288,199,304,177,323,165,334,143,361" /> <area alt="Not the Flamingo." title="Not the Flamingo." href="/wp-content/uploads/no-flamingo.jpg" target="_blank" shape="default" /> </map> Values of the shape Attribute
| Value Name | Notes |
|---|---|
| rect | Specifies that the clickable area is a rectangle, and that the value of coords should be interpreted as two pairs of x, y coordinates defining opposite corners of the rectangle. |
| circle | Specifies that the clickable area is a circle, and that the value of the coords attribute should be interpreted as a set of x,y coordinates followed by a radius. |
| poly | Specifies that the clickable area is a free polygon, and that the value of the coords attribute should be interpreted as a series of x,y coordinate pairs. |
| default | Specifies that the clickable area is any portion of the image map which is not included in another area already. Should be placed last within the map element. |
All Attributes of area Element
| Attribute name | Values | Notes |
|---|---|---|
| alt | text | Specifies alternative text for a clickable area in an image map. |
| coords | values | Defines the shape and size of a clickable area in an image map. |
| href | url | Defines the URL of the linked document or resource. |
| nohref | Specified that an area of an image map did not link to another resource. | |
| shape | rect circle poly default | In conjunction with the coords attribute, specifies the shape, size, and placement of a clickable area in an image map. |
| target | framename _top _parent _blank | Specifies the context in which to open the linked resource. |
| title | text | Defines the title text of the clickable area. The title text will appear as a tooltip in most browsers. |
Browser Support for shape
 |  |  |  |  |  |
| All | All | All | All | All | All |