How to divide an image into different clickable link area using HTML?
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
<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).