Attribute of
<area>
What does <area shape=""> do?
In conjunction with the coords attribute, specifies the shape, size, and placement of a clickable area in an image map.

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> 

Flamingo. Not the Flamingo.

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> 

Flamingo. Not the Flamingo.

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

AllAllAllAllAllAll