How to create clickable areas in an image in HTML?

HTMLWeb DevelopmentFront 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

Live Demo

<!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>
raja
Published on 01-Feb-2018 11:08:36
Advertisements