How to Create an Image Map in HTML ?

Last Updated : 19 Apr, 2024

An image map is a graphical representation that allows you to define clickable areas (or “hotspots”) within an image. Each hotspot can be associated with a hyperlink, making different parts of the image interactive. Image maps are commonly used for navigation menus, interactive diagrams, and geographic maps.

Using the `<map>` and `<area>` Tags

The most common way to create an image map in HTML is by using the <map> and <area> tags. The <map> tag is used to define the image map, and the <area> tag is used to define each clickable area within the map.

Example 1: The below code will create a image map using the map and area tag.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Image Map Example
    </title>
</head>

<body>
    <img alt="Difference Image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190813144529/bsd1.png"
        usemap="#image-map">

    <map name="image-map">
        <area coords="0,0,1,264,456,267,267,2" href=
"https://www.geeksforgeeks.org/html-tutorial/" target="_blank"
            shape="poly">

        <area coords="266,0,456,268,706,268,704,2" href=
"https://www.geeksforgeeks.org/php-tutorial/" target="_blank"
            shape="poly">
    </map>
</body>

</html>

Output:

image-map

Example 2: This example describes the use of HTML map. Here, we use image map to make image clickable with three different links in different areas.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to create an image map in HTML?
    </title>
</head>

<body style="text-align:center">
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png" 
         alt="" width="300"
         height="119" 
         class="aligncenter size-medium wp-image-910965" 
         usemap="#shapemap" />

    <map name="shapemap">

        <area shape="poly" coords="59, 31, 28, 83, 91, 83"
              href=
"https://www.geeksforgeeks.org/html-tutorial/" alt="HTML Tutorial">

        <area shape="circle" coords="155, 56, 26"
              href=
"https://www.geeksforgeeks.org/css-tutorial/" alt="CSS Tutorial">

        <area shape="rect" coords="224, 30, 276, 82"
              href=
"https://www.geeksforgeeks.org/javascript/" alt="JavaScript Tutorial">
    </map>
</body>

</html>