Definition
The <map> HTML element is used in conjunction with the <area> element to define an image map. An image map allows you to associate different regions of an image with different hyperlinks or actions.
Here’s an example of how to use the <map> element:
<img src="image.jpg" alt="Image" usemap="#myMap" />
<map name="myMap">
<area shape="rect" coords="0,0,100,100" href="page1.html" alt="Link 1" />
<area shape="circle" coords="150,150,50" href="page2.html" alt="Link 2" />
</map>
In this example, the <img> element displays an image, and the usemap attribute specifies the corresponding <map> element to be used. The <map> element contains one or more <area> elements, which define different regions within the image.
Each <area> element has attributes that define the shape, coordinates, and associated link or action. In this case, we have two <area> elements: one with a rectangular shape (shape="rect") and coordinates (coords="0,0,100,100") and another with a circular shape (shape="circle") and coordinates (coords="150,150,50"). The href attribute specifies the target URL or action, and the alt attribute provides alternative text for accessibility purposes.
When a user interacts with the defined regions of the image, the associated link or action will be triggered. For example, clicking on the rectangular area will navigate to “page1.html”, while clicking on the circular area will navigate to “page2.html”.
It’s important to ensure that the coordinates and shapes defined in the <area> elements accurately correspond to the regions of the image. You can use various shapes, such as rectangles, circles, polygons, or even image-based mapping using the shape attribute.