HTML coords Attribute
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. Thecoords
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. Thecoords
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. Thecoords
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 | |||||
12 | 1 | 1 | 15 | 1 |
Tablets / Mobile | |||||
18 | 4 | 14 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 28th March 2024