HTML map Tag

The <map> tag is an HTML element used to define an image map in an HTML document. An image map allows you to associate clickable areas or “hotspots” within an image with specific actions or URLs.

Here’s an example of how the <map> tag is used:

<img src="diagram.png" alt="Diagram" usemap="#diagram-map">
<map name="diagram-map">
     <area shape="rect" coords="100,100,200,200" href="page1.html" alt="Area 1">
     <area shape="circle" coords="300,150,50" href="page2.html" alt="Area 2">
</map>

In this example, the <map> tag is used to define an image map for the image “diagram.png”. The name attribute assigns a name to the map, which is then referenced by the usemap attribute in the <img> tag.

Inside the <map> tag, one or more <area> tags are used to define clickable areas within the image. Each <area> tag represents a specific area or shape on the image map. The shape attribute defines the shape of the area, which can be “rect” (rectangle), “circle”, “poly” (polygon), or “default” (entire image). The coords attribute specifies the coordinates of the shape’s boundaries, and the href attribute specifies the URL or destination of the link. The alt attribute provides alternative text for accessibility purposes.

When a user clicks on one of the defined areas, the browser performs the action specified in the associated <area> tag, such as navigating to a different page or executing a JavaScript function.

Image maps are useful for creating interactive diagrams, clickable maps, or any image with specific clickable regions. The <map> tag provides a way to define these regions and associate them with appropriate actions.

It’s important to note that the use of image maps has become less common in modern web development, as alternative techniques like CSS and JavaScript-based interactions offer more flexibility and interactivity. However, image maps can still be a viable option in certain scenarios where specific region-based interactions are required.