logo

HTML coords attribute

coords means coordinates in the 2-D plane. These coordinates are used to draw the shape on an image.

<img src="files/three images.jpg" usemap="#shapes" alt="three shapes of triangle, square, circle">
 <map name="shapes">
 <area alt="triangle" title="triangle" href="files/triangle.html" shape="poly" coords="13,122,50,61,86,123" />
 </map>
</>
three shapes of triangle, square, circle triangle

Attribute values

All possible values of coords attribute

The value of coords attribute is the integers separated by a comma.

circle coords

Coordinates of a circle are given below. 

<area alt="circle" title="circle" href="files/circ.html" shape="circle" coords="196,89,33" />
Try</>

There are three integers (coordinates) in the coords attribute. The first and second values represent the distance of center of the circle form the left and top edges of the image. The third integer represents the radius of the circle.

rectangle coords

Coordinates of a rectangle are given below.

<area alt="rectangle" title="rectangle" href="blue" shape="circle" coords="196,89,33" />
Try</>

There are four coordinates of the rectangle.

The four integers represent the distance from the left edge of the image to the left side of rectangle, from the top edge of the image to the top side of rectangle, from the left edge of the image to the right side of rectangle, from the top edge of the image to the bottom side of the rectangle.

polygon

For a polygon, coordinates are given below. The following coordinates represent a square.

<area href="files/square.html" coords="94,122,93,58,158,58,157,122" title="square" shape="poly">
Try</>

default

By default the coords attribute does not have any value and the shape is the whole image.

<area alt="default" title="default" href="files/three images.jpg" shape="default" coords="0" />
Try</>

A polygon always has even no. of integers. The above example has three pairs of integers.

One pair (one integer is the distance of point from the left side and the other integer is the distance from the top side) represents two coordinates.

Same is the case with second and third pairs. These coordinates should be present in the order.

Related Tags

The tags that support coords attribute

area tag supports the coords attribute.

Was this article helpful?