How to create an image map in JavaScript ?
Last Updated :
05 May, 2025
An image map is nothing but an image that is broken into various hotspots and each hotspot will take you to a different file. Hotspots are nothing but clickable areas which we create on an image by using the <area> tag. This type of map is called a client-side image map as the map is embedded in the HTML itself.
Approach: Below is the step-by-step implementation of How to create an image map in JavaScript.
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.
Syntax:
<img src="map1.jpg" alt="Cocktails"
usemap="#mymap" width="600" height="400">
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.
Syntax:
<map name="mymap">
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.
Syntax:
<area shape="rect" coords="x,y,x,y" href="">
<area shape="circle" coords="x,y,r" href="">
<area shape="poly" coords="" href="">
Step 4: Now for finding the coordinate of an image.
- Rectangle image will have the coordinates x1,y1,x2,y2 where x1,y1 are the coordinates of the top left corner and x2,y2 are the coordinates of the bottom right as shown in the image.
- Circle image will have the coordinates x,y,r where x,y are the coordinates of the center of the circle and r is the radius of the circle.
- Polygon image will have the coordinates x1,y1,x2,y2,x3,y3,x4,y4,,....... where x,y defines the coordinates of one of the corners of the image as shown in the image.
Example 1: In this example, we will simply create the image map of a rectangle and circle images.
HTML
<!DOCTYPE html>
<html>
<body>
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210824153314/imagemap1-211x300.png"
alt="Cocktails"
usemap="#mymap"
width="400"
height="500"/>
<map name="mymap">
<area
shape="rect"
coords="167,22,380,113"
alt="Write"
href="https://write.geeksforgeeks.org/"
onmouseover="myFunction('Write for Us!!')"
onmouseout="myFunction('')"/>
<area
shape="rect"
coords="148,423,382,500"
alt="Practice"
href="https://practice.geeksforgeeks.org/"
onmouseover="myFunction('Practice and Learn')"
onmouseout="myFunction('')"/>
<area
shape="circle"
coords="115,260,40"
alt="IDE"
href="https://www.geeksforgeeks.org/community/"
onmouseover="myFunction('IDE')"
onmouseout="myFunction('')"/>
</map>
<h1 id="info"></h1>
<script>
function myFunction(name) {
document.getElementById("info").innerHTML = name;
}
</script>
</body>
</html>
Output:
Example 2: In this example, we are considering the yellow-colored portion of the image as a polygon.
HTML
<!DOCTYPE html>
<html>
<body>
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210824153724/imagemap2-300x179.png"
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="https://www.geeksforgeeks.org/"
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>
Output:
Similar Reads
How to Crop an Image in JavaScript? To crop an image in JavaScript, you can use the <canvas> element to manipulate the image's dimensions and crop it to a specified area. This approach is flexible and works entirely in the browser without needing external libraries. Here's a step-by-step example demonstrating how to crop an imag
3 min read
How to Make an SVG Image in JavaScript ? The SVG images are vector images that do not lose their quality either in the case of Zoom in or Zoom out. These are the Scalable Vector Graphics that can be directly created using the <svg> tag in HTML or dynamically using JavaScript. Let us create an SVG using JavaScript. We can use the belo
2 min read
How to Create an Image Map in HTML ? An image map is a graphical representation that allows you to define clickable areas (or "hotspots") within an image. Each hotspot can be associated with a hyperlink, making different parts of the image interactive. Image maps are commonly used for navigation menus, interactive diagrams, and geograp
2 min read
How to Create an Image Element using JavaScript? Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit
2 min read
How to use document.images in JavaScript ? In JavaScript, the document.images property returns a collection of all "<img>" elements within the current document. We can manipulate these images using various properties and methods. We will see how to work with document.images in JavaScript. ApproachFirst, create a basic HTML structure an
2 min read
How to Display Images in JavaScript ? To display images in JavaScript, we have different approaches. In this article, we are going to learn how to display images in JavaScript. Below are the approaches to display images in JavaScript: Table of Content Using CreateElementUsing InnerHTMLApproach 1: Using CreateElementIn an HTML document,
2 min read