HTML coords Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The HTML coords attribute specifies the coordinates of an area within an image map. An image map allows an image to have clickable areas, each defined by <area> elements. The purpose of these clickable areas is to create hyperlinks to different destinations or to perform different actions, depending on the part of the image clicked by the user.

The coords attribute is used in conjunction with the <area> element and requires the shape attribute to determine the type of shape being defined. The value of the coords attribute differs based on the shape specified by the shape attribute. Here are the shapes and their corresponding coords values:

rect: Defines a rectangle. The coords attribute should contain four comma-separated numbers that specify the coordinates of the top left corner and the bottom right corner of the rectangle (e.g., x1,y1,x2,y2).
circle: Defines a circle. The coords attribute should contain three comma-separated numbers that specify the center of the circle and its radius (e.g., x,y,radius).
poly: Defines a polygon. The coords attribute should contain a comma-separated list of points, where each point is defined by an x and y coordinate. The list should have at least six numbers, as a polygon requires a minimum of three points to be defined (e.g., x1,y1,x2,y2,x3,y3,...).

It's important to note that the coordinates are relative to the top left corner of the image, with the x-axis running horizontally and the y-axis running vertically. This attribute provides a way to create more interactive and navigable web pages by allowing users to interact with different parts of an image.

Syntax

<area coords="coordinates" />

Values

coordinates
- Rectangle: coords="x1,y1,x2,y2"
  - x1,y1 represents the coordinates of the top-left corner.
  - x2,y2 represents the coordinates of the bottom-right corner.
- Circle: coords="x,y,radius"
  - x,y represents the center coordinates of the circle.
  - radius defines the circle's radius.
- Polygon: coords="x1,y1,x2,y2,x3,y3,..."
  - A comma-separated list of coordinates defining the vertices of the polygon.
  - If the first and last coordinate pairs aren't the same, the browser will automatically close the shape.

Applies To

<area>

Example

HTML

<img alt="Shapes" height="102" src="images/shapes.jpg" style="border: none;" usemap="#shapes" width="375" />



<map name="shapes" id="shapes">

  <area shape="circle" coords="58,50,40" href="javascript:clicked_on('circle');" title="Circle" alt="Circle"/>

  <area shape="rect" coords="136,11,227,89" href="javascript:clicked_on ('rectangle');" title="Rectangle" alt="Rectangle"/>

  <area shape="poly" coords="309,13,358,89,257,89" href="javascript:clicked_on('triangle');" title="Triangle" alt="Triangle"/>

  <area shape="default" nohref="nohref" title="Default" alt="Default"/>

</map>

<script>

function clicked_on ( clicked_shape )

{

	alert ( "You clicked on the " + clicked_shape );

}

</script>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML coords attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.