Image maps in HTML5 allow you to make certain areas of an image clickable, leading users to different links or triggering specific actions. The clickable areas (also known as hotspots) are defined using the <area> tag, while the <map> tag is used to specify the map itself.
What Is an Image Map?
An image map is an image with clickable areas, defined by coordinates. When a user clicks on a defined section of the image, they are redirected to a URL, or an action is performed. This is useful for things like:
- Navigational menus
- Interactive infographics
- Clickable charts or diagrams
Syntax:
<map name="map-name">
<area shape="shape" coords="x1, y1, x2, y2" href="URL">
</map>
Attribute value:
- name: It is used to associate the map with the image in which it is used.
Note: The name attribute in the map must have the same value as the image's usemap attribute.
Example: Creating a Simple Image Map in HTML5
Hereâs an example of creating a clickable image map where a specific area redirects to a website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/array-2.png"
alt="gfgimage" usemap="#mapID">
<map name="mapID">
<area shape="rect" coords="34, 44, 270, 350" href="
https://www.geeksforgeeks.org/dsa/dsa-tutorial-learn-data-structures-and-algorithms/">
</map>
</body>
</html>
Output:
