Teach with us

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 22-Dec-2021 11:09:45

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements