HTML coords Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. 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

The coords attribute can be used on the following html elements.

Example

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

Browser Support

The following table will show you the current browser support for the HTML coords Attribute.

Desktop
Edge Chrome Firefox Opera Safari
1211151
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18414114.4

Last updated by CSSPortal on: 28th March 2024