How to add a hit map on top of an image in HTML ?
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.
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.
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.
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.
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.