The HTML mapping image is a client-side image-map with clickable areas which acts as hyperlinks in an HTML document. To create the relationship between the map and img HTML element the name attribute of map element is associated with the img usermap attribute.
Syntax
Following is the syntax −
<img src=”” alt=”’ usemap=”#name_value”> <map name=”name_value”> <area shape=”” coords=”” href=”” alt=”’> <area shape=”” coords=”” href=”” alt=”’> </map>
Let us see an example of HTML mapping image−
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>HTML Mapping Image</h1>
<img src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt="Learn Hadoop" usemap="#hadoopImg">
<map name="hadoopImg">
<area shape="rect" coords="0,0,400,100" alt="Hadoop Logo" href="https://www.tutorialspoint.com/hadoop/images/hadoop.jpg" width="100" height="100">
</map>
<p>Click on the above logo</p>
</body>
</html>Output
Click on the logo part (elephant) of Hadoop in the image to observe how HTML mapping image works−
