PUBLISHED ON: JULY 20, 2021
How to create an image with clickable areas?
Answer: Using <map> and <area> tag
The images on the webpage can be made clickable using HTML. It will help the user to access other pages by clicking on them. Here, we will learn to create an image with clickable areas.
HTML image map
An HTML image map is used to create a clickable area within the image. The image map is defined with coordinates value which will allow only the specified area to be clickable. So we can add multiple links within the same image to access different links. The elements used to add clickable areas are:
map
The <map> tag is used to map clickable areas to an image. It has a name attribute that links it with the image.
area
The <area> tag is used to add the coordinate values of the image which you want to make clickable. The coordinates are specified using coords attribute. Further, the clickable area shapes can also be defined. The shapes used for the clickable area are
rect - for rectangular clickable areacircle - for the circular clickable area.poly - for the polygonal clickable area.default - to make the entire image clickable.
image
The image will be added using the <img> tag. Add the path to the src attribute. The usemap attribute is used to link the map element. The name and usemap attribute should have the same value.
Example: Add circular clickable area to an image
For the circular clickable area on the image, identify the center coordinates of the clickable area along with the radius. Add these values to coords.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2>circular clickable area on image</h2>
<p> Click on coffee mug to explore the page </p>
<map name="clickable">
<area shape="circle" coords="309,164,60" href="https://www.studytonight.com/bootstrap/bootstrap-carousel">
</map>
<img usemap="#clickable" src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1624710141-101156.png" alt="picture" width="500px" height="300px">
</body>
</html>
Output:
Example: Add multiple clickable areas to the image
Here, we have used the above shapes to make multiple clickable areas on the image. Each will redirect to different pages. For rectangular clickable areas, we need two pairs of coordinates( left-top pair and bottom-right coordinates). For clickable polygon area, we need several coordinates. Add coordinate pair of the border of the object to it.
Conclusion
So, we can create a clickable area on images Using HTML elements. It is useful as we can add multiple links within the same image. So when the user can click on the clickable part and access the links easily.
