JavaScript has the capability to generate a client-side image map. An image map refers to an image displayed on a webpage that contains various links leading to different pages. These links are referred to as hotspots. The primary function of an image map is to facilitate navigation to various links, whether they direct to other pages or to sections within the same webpage.
An image map allows for the segmentation of an image into various areas. Each area can be associated with a hyperlink, and upon clicking any specific area, the user will be directed to the relevant link. These areas can take on a variety of shapes, including circles, rectangles, or polygons. To construct a rectangular image map, two distinct coordinates are necessary: the top right and the bottom left corners. In the case of designing a pentagonal image map, five coordinates will be needed.
Image maps offer a method to associate different areas of an image with links, eliminating the need for separate image files. The usemap attribute is utilized within the <img> tag to outline the map definition for the corresponding image. This attribute references the map definition linked to that particular image. Each image map is designated by a unique identifier, which necessitates the use of the name attribute in the MAP element.
Another tag known as the <area> tag is utilized to specify the coordinates and shapes of individual sections. Additionally, we can incorporate events like onclick, ondblclick, onmouseover, onmouseout, onblur, and others with the <area> tag.
The code snippet used for establishing the image map is presented below.
Syntax
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" usemap = "#jtp">
<map name = "jtp">
<area shape = "rect" coords="x, y" />
<area shape = "circle" coords = "x, y, r" />
</map>
At this point, let's examine a few examples of utilizing the image map to gain a clearer understanding of its functionality.
Example
In this instance, we have an image that serves as the basis for developing an image map. We will be segmenting the image into two distinct areas: one in a rectangular format and the other in a circular form.
The initial portion pertains to the upper section of the image, while the subsequent portion refers to the central area of the image.
<html>
<head>
<title> JavaScript Image Map </title>
<script>
function show(name) {
document.my.res.value = name;
}
</script>
</head>
<body style = "text-align: center;">
<h2> It is an example of JavaScript's Image map </h2>
<form name = "my">
<input type = "text" name = "res" size = "25px" style = "font-size: 25px; text-align: center; border: 2px solid blue; background-color: pink;"/>
</form>
<br>
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image" border = "5" usemap = "#names" height = "300px"/>
<map name = "names">
<area shape = "rect" coords = "0, 0, 325, 90" href = "#" onclick = "show('Rectangular Shape')" />
<area shape = "circle" coords = "150, 140, 60" href = "#" onclick = "show('Circular Shape')" />
</map>
</body>
</html>
Output
Upon running the aforementioned code, the resulting output will be -
On clicking the top area, the output will be -
On clicking the middle area, the output will be -
Example2
In this context, we are utilizing the href attribute within the <area> tag to specify the images. This indicates that upon clicking the respective sections, the associated image will appear.
The image is split into two parts. The upper part represents the first section of the image, while the central part denotes the second section. When a user clicks on the respective sections, the name associated with the linked image is initially shown in the specified text field, followed by the display of the image itself.
<html>
<head>
<title> JavaScript Image Map </title>
<script>
function show(name) {
document.my.res.value = name;
}
</script>
</head>
<body style = "text-align: center;">
<h2> It is an example of JavaScript's Image map </h2>
<form name = "my">
<input type = "text" name = "res" size = "25px" style = "font-size: 25px;text-align: center;border: 2px solid blue; background-color: pink;"/>
</form>
<br>
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image" border = "5" usemap = "#names" height = "300px"/>
<map name = "names">
<area shape = "rect" coords = "0, 0, 325, 90" href = "forest.jpg" onclick = "show('Forest.jpg')" />
<area shape = "circle" coords = "150, 140, 60" href = "tiger.png" onclick = "show('Tiger.png')" />
</map>
</body>
</html>
Output
Upon executing the aforementioned code, the resulting output will be -
On clicking the top area, the output will be -
On clicking the middle area, the output will be -