How to divide an image into different clickable link area using HTML?

Last Updated : 25 Jul, 2024

An image can be divided into different clickable and linkable areas using an Image map. The Image map is used for navigation purposes.

An image map consists of several tags:

img: It specifies the image to be included in the map.
map: It creates a map of clickable areas.
area: It is used inside the map element to define the clickable areas.

We can make areas of the following shapes:

circle: circular region
rect: rectangular region
poly: polygon-shaped region
default: region outside any defined shapes

Example: In this example, we will create a different clickable area in the image.

<img src="gfg.png" usemap="map_rect"> 

<map name="map-rect"> 
    <area shape="rect" coords="18,26,220,226" 
        href="https://www.geeksforgeeks.org"/> 
</map>

HTML code: In the following example, we are going to use the rect shape as we can easily divide the rectangle into four equal parts. The first two values of coords property are the (x, y) coordinates of the top left corner. The third and fourth numbers are the (x, y) coordinates of the bottom right corner.

Note: The (x, y) coordinates use the top-left corner as the origin (0, 0).

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        img {
            width: 500px;
            height: 500px;
            border: 1px red solid;
        }
        h1 {
            color: Green;
        }
        body {
            background: white;
            margin-top: 4%;
            margin-left: 10%;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Creating 4 equal clickable areas in an image</h2>
    <img src="gfg.png" alt="usemap" usemap="#gfg_map" />
    <map name="gfg_map">
        <!-- dividing rectangle into 4 equal parts -->
        <area shape="rect" 
              coords="0,0, 250,250" 
              alt="GFG1" 
              href="https://www.google.co.in" 
              target="_blank" />
        <area shape="rect" 
              coords="250,0, 500,250" 
              alt="GFG2" 
              href="https://www.geeksforgeeks.org" 
              target="_blank" />
        <area shape="rect" 
              coords="0,250, 250,500" 
              alt="GFG3" 
              href="https://github.com" 
              target="_blank" />
        <area shape="rect" 
              coords="250,250, 500,500" 
              alt="GFG4" 
              href="https://duckduckgo.com" 
              target="_blank" />
    </map>
</body>

</html>