Image Map (<map>, <area>)

When To Use

• To generate an image map consisting of clickable regions of any shape, which can then be associated with an image. ¹

Rules

• Make sure to include duplicate text links on the same page, as image maps may not operate properly on certain mobile devices if the area coordinates are not scaled proportionally to the image. ³
• It is recommended that each <area> element should have an alt text, similar to any other hyperlink. ³

Examples

<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map"
    target="_blank"
    alt="JavaScript"
  />
  <area
    shape="circle"
    coords="275,75,75"
    href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area"
    target="_blank"
    alt="CSS"
  />
</map>
<img usemap="#primary" src="image.jpg" alt="picture of something" />

Sources 

1. MDN: <map>: The Image Map element by Mozilla contributors is licensed under CC-BY-SA 2.5
2. MDN: <area>: The Image Map Area element by Mozilla contributors is licensed under CC-BY-SA 2.5
3. W3C WAI: Image Maps by W3C WAI Tutorial Contributors is licensed under W3C Document License