How to make image maps in HTML5 ?

Last Updated : 01 Jun, 2023

The HTML <map> tag is used to define image maps in HTML. The areas inside the image which are clickable are defined by using the <area> tag. The main idea of this concept is that whenever we click on the image it should perform any action. For creating an image map we have to add usemap as an attribute to the <img> tag.

Syntax:

<map name="map-name">

Attribute value:

name: It is used to associate the map with the image in which it is used.

Note: The name attribute in the map must have the same value as the image’s usemap attribute.

Example: In this example, the highlighted area is the mapped area, clicking on it will lead to the website.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">    
</head>
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/array-2.png"
         alt="gfgimage"
         usemap="#mapID">
    <map name="mapID">
        <area shape="rect"
              coords="34, 44, 270, 350"
              href="https://www.geeksforgeeks.org/data-structures/?ref=shm">
    </map>
</body>
</html>