shape

Shape Attribute

The shape attribute in HTML is used with the <area> tag in image maps to define the shape of clickable areas. Possible values include rect, circle, poly, and default. The shape attribute must be combined with the coords attribute, which specifies the dimensions or coordinates of the clickable area. This allows users to interact with specific regions of an image, enhancing navigation and user experience.

Syntax

<area shape="shape_type" coords="coordinates" href="link" alt="description">

Example

Here is an example of an image map with clickable areas:

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

Key Points

• Accessibility: The alt attribute is essential for accessibility, providing descriptions that help screen readers interpret the clickable areas.
• Image Size: The coordinates in the coords attribute are relative to the image's actual size, so ensure the image is displayed at its true dimensions for accuracy.
• Browser Support: Image maps are generally supported across modern browsers, but it’s always a good idea to test your image maps on different platforms for compatibility.

Conclusion

The shape attribute in HTML defines the type of clickable areas within an image map, enhancing user interactivity. It works in conjunction with the coords attribute to specify the size and location of each clickable region. Common shape types include rect, circle, and poly, and it’s important to ensure the alt attribute is used for accessibility.