JavaScript - Image Map

An image map in JavaScript is a type of image that has multiple clickable areas, also known as "hot spots", each of which can be linked to a different web page or URL. Image maps are created by defining the shape and location of each hot spot within an image using HTML <map> and <area> elements.

You can use JavaScript to create 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.

For example, you could create an image map of a map of a country and have each region of the country linked to a different page with information about that region. When a user clicks on a hot spot, they are redirected to the URL specified in the corresponding <area> element.

Here's an example of a simple image map in HTML:

<img src="map.jpg" usemap="#map">

<map name="map">

  <area shape="rect" coords="10,10,100,100" href="region1.html">

  <area shape="rect" coords="120,10,210,100" href="region2.html">

</map>

In this example, the <img> element is linked to the image map with the usemap attribute. The <map> element defines the image map with the name "map", and the <area> elements define the hot spots with the shape (rectangle), coordinates (x,y), and URL to be linked to.

JavaScript can be used to add interactivity and dynamic behavior to image maps, such as changing the cursor on mouse hover, displaying tooltips, or highlighting hot spots on mouse hover.