`Area Shape HTML Tutorial For Beginners: Get The Code Now`

In HTML Attributes

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Attribute of: <area> HTML Tag
What does Area Shape HTML Tutorial For Beginners: Get The Code Now do?: In conjunction with the coords attribute, specifies the shape, size, and placement of a clickable area in an image map.

Contents

1 Code Example
2 Specifying the shape of an <area> element
3 Default Area
4 Values of the shape Attribute
5 All Attributes of area Element
6 Browser Support for shape

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.