In order to access this site you need to enable JavaScript!

You are here: Reference > HTML > attributes > coords (a, area)

coords attribute (a, area)

Browser support:

Sets the position of a shape. You can select the type of shape with the shape attribute.

JavaScript page for this attribute: coords. You can find other example(s) there.

Possible values:

String that sets a comma-separated list of coordinates.

One of the following values:

x, y, r

The shape attribute must be set to 'circle'. x - center x position, y - center y position, r - radius.

x1, y1, ... xn, yn

The shape attribute must be set to 'polygon'. The Cartesian coordinates (x1, y1), (x2, y2), ..., (xn, yn) of its vertices, listed in order as the area is circulated in counter-clockwise fashion.

x1, y1, x2, y2

The shape attribute must be set to 'rectangle'. x1, y1 - are the upper left x,y coordinates, x2, y2 - are the bottom right x,y coordinates of the rectangle.

Default: this attribute has no default value.

Example HTML code 1:

This example illustrates the use of the coords attribute:

<img src="area.gif" style="width:504px; height:126px; border:none;" alt="Solar System" usemap="#SampleMap" />
<map name="SampleMap">
    <area shape="rect" coords="1,-1,83,125" alt="rectangle" href="#">
    <area shape="circle" coords="234,57,30" alt="circle" href="#">
    <area shape="poly" coords="363,37,380,40,399,35,420,47,426,63,423,78,430,94,409,90,395,92,379,84,371,67,370,57" alt="polygon" href="#">
</map>