Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use JavaScript to create client-side image map?
In this tutorial, we will see how we can create a client-side image map using JavaScript.
We use JavaScript to create a client-side image map. Client−side image maps are enabled by the usemap attribute for the <img/> tag and defined by special <map> and <area> extension tags.
The image that is going to form the map is inserted into the page using the <img/> element as normal, except that it carries an extra attribute called usemap. The value of the usemap attribute is the value of the name attribute on the <map> element, which you are about to meet, preceded by a pound or hash sign.
Before going to discuss the process, let us learn what is image−map.
An image map is a process of breaking an image into various parts, where each part refers to a different file or the link to the different web pages. These parts in the image are the areas which a user can click and visit the particular file or web page contained by that part. We need to implement it manually in our HTML document, that is why it is known as the client side image map.
While creating the image map, we need to use the following HTML tags −
img tag − The image tag is used as usual to embed an image in the document. But this time, we will use image tag with a special attribute named usemap, which takes the value that is given to the name attribute of the map tag preceded by the pound or the hash symbol, as shown in below syntax −
<img src="image address" alt="alternate name" usemap="#nameAttributeValue">
map tag − The map tag is used to create an image map, it links the map with the image to which the value of name attribute is passed as the value of usemap attribute inside the img tag, the syntax is shown below −
<map name="value"></map>
area tag − The area tag is used to define the different area parts in the image. This tag takes the href attribute to specify the address of the file or the page it contains. We can give a particular shape out of the rectangle, circle, and polygon to the area tag using the shape attribute and also specify its position on the image using the coords attribute, as shown below −
<area shape="shape" coords="a, b, a1, b1" href="file or web page address" alt="alternate name">
Let us understand, how we can create a client side image map using JavaScript by practically implementing it with help of code example −
Algorithm
Step 1 − In the first step, we will define an image tag with the usemap attribute as shown in above syntax.
Step 2 − In the next step, we will define a map tag with the name attribute associated with it and give the same values to the name attribute of map tag and the usemap attribute of the img tag.
Step 3 − In the third step, we will create the different hotspots on the image using the area tag with the attributes specified in the above syntax and give them the relevant value.
Step 4 − In the last step, we will add the functionality to show the output on the user screen using JavaScript.
Example 1
In the below example, we create a client-side image map using JavaScript.
<html>
<head>
<title>Using JavaScript Image Map</title>
<script type="text/javascript">
function showTutorial(name) {
document.myform.stage.value = name
}
</script>
</head>
<body>
<form name="myform">
<input type = "text" name = "stage" size = "20" />
</form>
<!-- Create Mappings -->
<img src="https://www.tutorialspoint.com/images/usemap.gif"
alt="HTML Map"
border="0"
usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="https://www.tutorialspoint.com/perl/index.htm"
alt="Perl Tutorial"
target="_self"
onMouseOver="showTutorial('perl')"
onMouseOut="showTutorial('')"/>
<area shape="rect"
coords="22,83,126,125"
href="https://www.tutorialspoint.com/html/index.htm"
alt="HTML Tutorial"
target="_self"
onMouseOver="showTutorial('html')"
onMouseOut="showTutorial('')"/>
<area shape="circle"
coords="73,168,32"
href="https://www.tutorialspoint.com/php/index.htm"
alt="PHP Tutorial"
target="_self"
onMouseOver="showTutorial('php')"
onMouseOut="showTutorial('')"/>
</map>
</body>
</html>
In the above example, if you bring the mouse cursor over the image at different spots you will see that the text value of the input bar changes accordingly and if you click on a particular spot, you will find yourself on the page or the file whose address that spot contains.
Let us see another code example to completely understand the implementation of the JavaScript to create client side image map −
Example 2
Below example will explain how to create image map using JavaScript −
<!DOCTYPE html>
<html>
<body>
<p> Hover over the different parts of the image below.</p>
<p id="result"></p>
<img src="https://www.nyongesasande.com/wp-content/uploads/2021/12/tutorials_point.jpeg" alt="HTML Map" border="0"
usemap="#tutorials" />
<map name="tutorials">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="https://www.tutorialspoint.com/perl/index.htm"
alt="Perl Tutorial"
target="_self"
onMouseOver="showTutorial('Perl Tutorials')"
onMouseOut="showTutorial('none')" />
<area shape="circle"
coords="22,83,126,125"
href="https://www.tutorialspoint.com/java/index.htm"
alt="Java Tutorial"
target="_self"
onMouseOver="showTutorial('Java Tutorials')"
onMouseOut="showTutorial('none')" />
<area shape="rect"
coords="373,68,32, 456"
href="https://www.tutorialspoint.com/javascript/index.htm"
alt="JavaScript Tutorial"
target="_self"
onMouseOver="showTutorial('JavaScript Tutorials')"
onMouseOut="showTutorial('none')" />
</map>
<script>
function showTutorial(name) {
var result = document.getElementById("result");
result.innerHTML = "This spot contains the link to the <b>" + name + " </b>page."
}
</script>
</body>
</html>
In this example, we have changed the shapes of the spots defined by the area tag on the image and also changed the links of the pages to which these spots will refer once user click on them.
In this tutorial, we have seen how we can create a client side image map using JavaScript. We have seen the practical implementation of the method with two different code examples to create image map, so that we can understand it better and there will be no confusion remained in the minds. We can create as many as hotspots as we want to create on an image and give them links to the different pages.
1K+ Views
