Learn How Area Coords Define Shapes & Sizes In HTML

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 Learn How Area Coords Define Shapes & Sizes In HTML do?
Defines the shape and size 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 shape and size with coords

The coords attribute specifies the shape and size of the clickable area. The meaning of the coordinate values depends on the value of the shape attribute. In all cases, the (x, y) coordinates use the top-left corner as the origin (0, 0).

Coordinates for 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.

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for coords

iefirefoxchromeedgesafariopera
AllAllAllAllAllAll