HTML Image Maps

HTML Image Map helps us define multiple hyperlinks on an image.

This provides an easy way of linking various parts of an image by just providing its shape and coordinates as below.

The attribute shape value can be any of the below values

  • circle to define a circular region
  • rect to define a rectangular region
  • poly to define a polygonal region
  • default to define the entire region or the whole image
<img src="/assets/images/objects.png" alt="Objects" usemap="#objects">
<map name="objects">
    <area shape="circle" coords="137,231,71" href="https://randomcodez.com/about" alt="About">
    <area shape="rect" coords="520,160,641,302" href="https://randomcodez.com/terms" alt="Terms">
    <area shape="poly" coords="363,146,273,302,452,300" href="https://randomcodez.com/privacy" alt="Privacy">
</map>

Example

Check the outcome of the below HTML document to see how it looks.

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Image Map</h1>
    <img src="/assets/images/computer.jpg" alt="Computer" usemap="#objects" >
    <map name="objects">
        <area shape="circle" coords="137,231,71" href="/examples/html/clock.html" alt="Clock">
        <area shape="rect" coords="520,160,641,302" href="/examples/html/book.html" alt="Book">
        <area shape="poly" coords="363,146,273,302,452,300" href="/examples/html/sign.html" alt="Sign">
        <area shape="poly" coords="363,146,273,302,452,300" href="/examples/html/sign.html" alt="Sign">
    </map>
</body>
</html>

Overall

HTML Image Maps are useful for defining multiple links on a single image, each mapped to a specific portion of the image.