coords

coords attribute

The coords attribute specifies the position of an area in an image map and works alongside the shape attribute. It is used within the <area> element to define clickable regions in different shapes. The coordinate format varies based on the shape type: for a rectangle x1, y1, x2, y2, for a circle x, y, radius, and for a polygon x1, y1, x2, y2, ....

Syntax

<area shape="rect" coords="x1,y1,x2,y2" href="link.html">

Example

• A clickable image map with defined interactive areas
  ::atter-coords ::

<img src ="img.jpg" width="145" height="126" alt="Laptop"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Definition and Usage

The coords attribute sets the coordinates for defining specific clickable areas in an image map. It is used alongside the shape attribute to establish the area's dimensions and positioning.

Applies To

The coords attribute applies to the following element:

Conclusion

The coords attribute is crucial for creating interactive regions within an image map, allowing users to click on specific sections that link to different pages or resources. By properly defining coordinates based on the selected shape, developers can ensure precise, functional image maps. When used alongside the shape and href attributes, it enhances navigation and improves user accessibility.