The <map> HTML element is used to define an image map, which is an image with clickable areas. This element works in conjunction with the <area> element to specify the regions of the image that are interactive. Each <area> element within a <map> defines a shape and the coordinates for a clickable region, which can link to different URLs or trigger different actions.
Usage and Characteristics
The <map> element is not directly visible on the page; instead, it is associated with an <img> element through the usemap attribute. The usemap attribute specifies the name of the <map> element, creating a relationship between the image and the map. Here is an example of how the <map> tag can be used:
<img src="example.jpg" alt="Example Image" usemap="#examplemap">
<map name="examplemap">
<area shape="rect" coords="34,44,270,350" alt="Section 1" href="section1.html">
<area shape="circle" coords="337,300,44" alt="Section 2" href="section2.html">
<area shape="poly" coords="140,121,181,116,204,160,204,222" alt="Section 3" href="section3.html">
</map>Valid Attributes for <map>
| Attribute | Description |
|---|---|
| name | Specifies the name of the image map, which is used to reference it from the usemap attribute of an |
The <map> element supports all global attributes, allowing for additional customization and interaction through CSS and JavaScript.
Benefits and Considerations
Interactivity: The
<map>element allows for the creation of interactive images, where different areas can link to different destinations or trigger different actions.Accessibility: Proper use of the
altattribute in<area>elements is crucial for accessibility, providing descriptive text for each clickable region.Flexibility: Image maps can define complex shapes using the
rect,circle, andpolyattributes in<area>, allowing for precise control over clickable regions.
In summary, the <map> element is a powerful tool for creating interactive images with multiple clickable areas. It enhances user engagement by allowing different parts of an image to link to various resources or actions, making it useful for navigation, diagrams, and interactive content.