Computer >> Computer tutorials >  >> Programming >> HTML

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

How to create clickable areas in an image in HTML?

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

How to create clickable areas in an image in HTML?