HTML <img> usemap Attribute

Example

<img src="desk.jpg" usemap="#image-map">

<map name="image-map">
  <area target="_blank" alt="Computer" title="Computer" href="computer.png" coords="112,31,285,246" shape="rect">
  <area target="_blank" alt="Cup" title="Cup" href="cup.png" coords="327,212,31" shape="circle">
  <area target="_blank" alt="Mobile" title="Mobile" href="mobile.png" coords="296,121,326,176" shape="rect">
  <area target="_blank" alt="Book" title="Book" href="book.png" coords="53,132,115,157,72,237,2,211" shape="poly">
</map>

Try this code ❯

Meaning

The usemap attribute makes the image support client-side image mapping.

Its argument is a URL specifying the map file, which associates image regions with hyperlinks.

The URL is generally a fragment identifier that references a location in the current document rather than a remote resource(URL).

Note: You cannot use this attribute if the <img> element is inside an <a> or <button> element.

Standard Syntax

HTML: <img src="URL" alt="text" usemap="#mapname">,
XHTML: <img src="URL" alt="text" usemap="#mapname" />

Attribute Values

Value	Description
#mapname	The partial URL (starting with #) of an image <map>map associated with the element.