---
title: "JavaScript – Image Map"  
description: "Introduction:In this article I am going to explain about image map in JavaScript and how we can use it in Java Script.An image-map is an image with a"  
author: "AVADHESH PATEL"  
published: 2012-11-19  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/392/javascript-image-map  
category: "javascript"  
tags: ["javascript"]  
reading_time: 1 minute  

---

# JavaScript – Image Map

##### Introduction:

In this [article](https://www.mindstick.com/articles/95867/are-you-looking-for-500-credit-score-mortgage-lenders-houston-continue-reading-this-article) I am going to [explain](https://www.mindstick.com/forum/157854/what-is-system-debugging-explain-some-system-debugging-tools-used-in-modern-computer-systems) about image map in [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) and how we can use it in Java [Script](https://www.mindstick.com/interview/477/how-can-i-execute-a-php-script-using-command-line).

An image-map is an image with a clickable area. It is used to [define](https://yourviews.mindstick.com/audio/1110/lifestyles-choices-that-define-our-lives) a [client side](https://www.mindstick.com/forum/160418/what-are-the-best-practices-for-securely-storing-bearer-tokens-on-the-client-side) image map. The image which is going to form the map is inserted on a page using <img> element, but it carries an extra [attribute](https://www.mindstick.com/blog/221/attributes-reflection) <usemap>. The value of the usemap attribute is the value of the name attribute on the <map> element, the <map> [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) contains a number of <area> elements, that defines the clickable areas on the image map. <area> elements also specifies the shapes and boundaries of each clickable hotspots.

##### Example of image Map:

```
<html xmlns="http://www.w3.org/1999/xhtml"><head>    <script type="text/javascript">        function show(name) {            document.form1.txtflowername.value = name        }    </script></head><body>    <form name="form1">    <input name="txtflowername" type="text" />    </form>    <img src="Chrysanthemum.jpg" width="145" height="126" alt="Chrysantheum" usemap="#Chrysanthemum">    <img src="Tulips.jpg" width="145" height="126" alt="Tulips" usemap="#Tulips">    <map name="Chrysanthemum">        <area shape="rect" coords="0,0,145,126" alt="Flower" target="_self" onmouseover="show('Chrysanthemum')" onmouseout="show('')" />    </map>    <map name="Tulips">        <area shape="rect" coords="0,0,155,126" alt="Flower3" target="_self" onmouseover="show('Tulips')" onmouseout="show('')" />    </map></body></html>
```

**[Output](https://www.mindstick.com/forum/161319/how-does-the-print-function-handle-output-in-python):**

\
![JavaScript – Image Map](https://www.mindstick.com/blogs/36550425-953e-4eaf-b867-99dd71e0ed0a/images/6c4d36ad-8375-4beb-8877-1afc493b4e67.jpg)

---

Original Source: https://www.mindstick.com/blog/392/javascript-image-map

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
