How to add a hit map on top of an image in HTML ?

Last Updated : 22 Aug, 2022

HTML is a Markup language is used to design web pages. When we need to make an image also works as a link, we use the <a> tag but in this tag, our whole image links to only one page. What will we do if we want to make every part of the image link to different resources? So, For this map tag comes into the picture. With the map, we can create different clickable areas on an image. It contains several active regions that each link to different parts of an image.

Steps to add a hit map on an image in HTML:

Insert an Image: First, insert an image using the <img> tag and add the usemap attribute inside the img tag as shown below.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Add hit map in image</title>
</head>
 
<body>
    <!-- Added a picture using img tag and inserted 
       usemap attribute with a value-->
    <img src="gfg.png" alt="demo image" usemap="#hitmap">
</body>
 
</html>

Create Map: After adding an image, add a map element using the <map> tag and link the image to that map using the name attribute and use the same value we have used in the usemap attribute as shown below.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Add hit map in image</title>
</head>
 
<body>
    <!-- Added picture using img tag and inserted 
       usemap attribute with a value-->
    <img src="gfg.png" alt="demo image" usemap="#hitmap">
 
    <!-- Added map tag and inserted name attribute
       with the value we used in usemap-->
    <map name="hitmap"></map>
</body>
 
</html>

Now add the attributes in the map tag: We will use the following attributes within the map tag.

area – we will create clickable areas through this tag.
- shape – we will define shapes within areas with the help of these values: rect, circle, poly, default.
- coords – We will define coordinates of clickable areas according to shape in terms of pixels.
  - rect – we will use provide two coordinates with the x & y coordinates for upper-left and bottom-right.
  - circle – we will provide the centre’s x and y coordinates, followed by the length of the radius
  - poly – we provide the x & y coordinates of each corner. So we have to take at least 6 values.
  - default – It occupies the entire image.
- href – we will use this tag to specify where the areas will point and which link it will open.

HTML

<map name="hitmap">
 
    <!-- For circle coordinates are- 
      first two coords for starting: 1 is 
      from the left & 2 is from the top.
      and last coordinate is for radius: 
      ex- 150. -->
    <area shape="circle" coords="1,2,150"
        href="www.geeksforgeeks.org">
 
    <!-- For rect coordinates are- 
      first two coords for starting: 1 is 
      from the left & 10 is from the top.
      last two coords for ending: 400 
      from the left, & 500 from the top. -->
    <area shape="rect" coords="1,10,400,500"
        href="www.google.com/gfg">
</map>

HTML code for creating a map on the top of an image: In the below picture, if you click on the red part, it will open Geeksforgeeks.org but when you click on the green part, it will open Google.com.

We have used two area tags of rect shape and declared their coordinates value according to the position. We need to assign to Geeksforgeeks or google. After that, we have used href tags to open their web links. The code for this is mentioned below for the same.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Add hit map in image</title>
</head>
 
<body>
 
    <!-- Added picture using img tag and inserted 
         usemap attribute with a value-->
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210922063041/pic.jpg"
         alt="picture"
         usemap="#hitmap">
 
    <!-- Created map tag with name attribute and 
         value that we have used in usename -->
    <map name="hitmap">
   
  <!-- Added area tags with shape, 
       coords & href attributes-->
  <area shape="rect"
        coords="0,0,200,200"
        alt="Gfg"
        href="https://ide.geeksforgeeks.org/">
  <area shape="rect"
        coords="0,200,400,400"
        alt="Google"
        href="www.google.com">
    </map>
</body>
 
</html>

Output:

Important points from the article:

First, check your image dimensions in which you are going to use the hit map and then use coordinates according to that.
The name attribute must have the same value that you will use in usemap in the img tag.
Use rect, circle and poly values in shape attribute.
Use area inside map attribute.