How to create clickable areas in an image in HTML?

To create clickable areas in an image, create an image map, with clickable areas. For example, on clicking a box, the different website opens and on clicking a triangle in the same image, a different website opens.

The <area> tag defines an area inside an image-and nested inside a <map> tag. The following are the attributes:

Sr.No
 Attribute & Description
1
 alt

The alternate text for the area
2
 coords

The coordinates for the area
3
 download

The target will download when the hyperlink is clicked
4
 shape

The shape of the area
5
 target

Where the URL will open

Example

You can try to run the following code to create clickable areas in an image in HTML

<!DOCTYPE html>
<html>
   <head>
      <title>HTML area Tag</title>
   </head>

   <body>
      <img src = /images/usemap.gif alt = "usemap" usemap = "#lessons"/>
      <map name = "lessons">
         <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
         <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
            href = "/html/index.htm" target = "_blank" />
         <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
            href = "/php/index.htm" target = "_blank" />
      </map>
   </body>
</html>

Output

Updated on: 2021-12-22T11:09:45+05:30

59K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements