JavaScript can be used to create a client-side image map. An image map is an image on the webpage that has multiple links to other pages. These links are called hotspots. An image map is used to navigate different links to other pages or on the same web page.
Step 1: The first step is to insert an image using the <img> tag. Here we will be using an additional attribute “usemap“. The value of the usemap must start with ‘#’ tag followed by the name of the map as written below.
Step 2: We then create an image map using the tag <map>. This creates a map linked to the image using the required name attribute. The name attribute value must be the same as given in usemap attribute of <img> tag.
Step 3: The different clickable areas are created using the tag <area>. We must be defining the shape of the area. The different shapes are rectangle, circle, and polygon. The coordinates of the area must also be given and href is the link that will be opened when the user clicks the area.
Step 4: Now for finding the coordinate of an image.
<!DOCTYPE html>
<html>
<body>
<img
src=
"img link"
alt="Polygon"
usemap="#map1"
width="600"
height="433"/>
<map name="map1">
<area
shape="poly"
coords="152,244,160,180,251,133,368,123,495,117,551,185,
467,278,396,303,311,298,230,292,169,268"
alt="Polygon"
href="link"
onmouseover="myFunction('A Computer Science portal for geeks.
It contains well written, well thought and well
explained computer science and programming
articles')"
onmouseout="myFunction('')"
/>
</map>
<h1 id="info"></h1>
<script>
function myFunction(name) {
document.getElementById("info").innerHTML = name;
}
</script>
</body>
</html>