How to create an image with clickable areas?
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> tag is used to map clickable areas to an image. It has a
name attribute that links it with the image.
<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 area
circle- for the circular clickable area.
poly- for the polygonal clickable area.
default- to make the entire image clickable.
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
<!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>
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.
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.