Image Map in JavaScript

This guide covers image map in JavaScript with practical context and easy-to-follow details. Use it to understand the subject and apply the information confidently.

Images that create maps are inserted into the page using elements img as usual, except that it carries an additional attribute called Usemap . The value of the Usemap Attribute is the name attribute value on the element map which you are about to see later, preceded by a # or $ symbol.

Element map actually create a map for the image and usually follow the element directly img. It acts as a container for the element which actually defines clickable hotspots. Element map carries only one attribute, name attribute, which is the map identifier. This is how the element img know the element

The element determines the shape and coordinates that define the limit (boundary) of a clickable hotpot.

The following code connects Image maps and JavaScript to create a message in the text box when moving the mouse over different parts of the image.

 Using JavaScript Image Map : img src="images/usemap.gif" alt="HTML Map" usemap="#tutorials" border="0"  Using JavaScript Image Map : img src="images/usemap.gif" alt="HTML Map" usemap="#tutorials" border="0" 

Result

Follow the above method to see the results

According to Tutorialspoint

Last lesson: Debug in JavaScript

Next article: Browser compatibility in JavaScript