How to create clickable areas in an image in HTML?

HTML Web Development Front End Technology

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

Anjana

Updated on: 22-Dec-2021

7K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started