usemap

The usemap attribute in HTML associates an image with an image map, enabling certain regions of the image to be clickable and guiding users to different destinations.

usemap attribute

The HTML usemap attribute connects an image to an image map, enabling specific areas of the image to function as clickable links. It is applied to an <img> tag, with its value corresponding to the name of a <map> element that includes <area> elements. These <area> elements define the clickable regions, their shapes, coordinates, and target URLs.

Syntax

index.html

<tagname usemap="#mapname">

Example

::atter-coords ::

index.html

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

Values

mapname
- A hash symbol (#) followed by the name of the map to be utilized.

The usemap attribute cannot be applied if the <img> element is nested within an <a> or <button> element.

Applies To

The usemap attribute can be applied to the following HTML element:

Conclusion

The usemap attribute allows for interactive image maps by associating an image with specific clickable areas. It improves web navigation by enabling different sections of an image to act as separate links. This attribute is key to making images more interactive and engaging.

sandbox

The sandbox attribute on the <iframe> element improves security by restricting actions like running scripts and submitting forms, while still allowing specific features to provide more control over embedded content.

width

The HTML width attribute specifies the width of elements like images, tables, and iframes, and can be defined using pixel values or percentages.