HTML coords attribute

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

Example

<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>
Try </>

coords attribute values

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

circle coords

Coordinates of a circle are given below.

Example

<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 integer is the distance of circle from the left edge of the image.

  • The second integer is the distance of circle from the top edge of the image.

  • The third integer is the radius of the circle.

rectangle coords

Coordinates of a rectangle are given below.

Example

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

Example

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

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.

default

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

Example

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

Try</>

Related Tags

area tag supports the coords attribute.



Was this article helpful?

 

Email:

Message:

Get the newsletter