Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 09 Feb, 2021

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: 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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


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

<map name="map-rect"> 
    <area shape="rect" coords="18,26,220,226" 

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). 


<!DOCTYPE html>
        img {
            width: 500px;
            height: 500px;
            border: 1px red solid;
        h1 {
            color: Green;
        body {
            background: white;
            margin-top: 4%;
            margin-left: 10%;
    <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=""  target="_blank"/>
         <area shape="rect" coords="250,0, 500,250" alt="GFG2"
            href="" target="_blank"/>
         <area shape="rect" coords="0,250, 250,500" alt="GFG3"
            href="" target="_blank"/>
          <area shape="rect" coords="250,250, 500,500" alt="GFG4"
            href="" target="_blank"/>


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!