<map>

Definition

The HTML <map> element is used to define an image map, which allows you to associate clickable areas within an image with specific hyperlinks or actions.

The <map> element must be used in conjunction with the <img> element, and the image must have a "usemap" attribute that references the name of the map.

Within the <map> element, you can define one or more <area> elements, which specify the clickable areas within the image. Each <area> element must have a "shape" attribute, which determines the shape of the clickable area, and a "coords" attribute, which specifies the coordinates of the area. You can also specify a "href" attribute to define the URL or action to be performed when the area is clicked.

Examples

Here's an example of how to use the <map> element:

<img src="example.png" alt="Example Image" usemap="#example-map">

<map name="example-map">
  <area shape="rect" coords="0,0,100,100" href="https://example.com/page1">
  <area shape="circle" coords="150,150,50" href="https://example.com/page2">
  <area shape="poly" coords="200,200,250,250,200,300" href="https://example.com/page3">
</map>

In this example, we've defined an image map for the "example.png" image with three clickable areas: a rectangle, a circle, and a polygon. When each area is clicked, the user will be directed to a different page on the "example.com" website, depending on which area was clicked.

Attributes

This element's attributes include the global attributes.

Best Practices

• Use descriptive names for your image maps. Choose a name that accurately reflects the purpose of the map and its associated image.
• Clearly define the clickable areas within your image using the <area> element. Use accurate and precise coordinates to avoid overlapping areas or gaps between clickable regions.
• Ensure that your image maps are accessible to users who rely on assistive technologies. Provide clear and descriptive text for each clickable region using the alt attribute of the <area> element.
• Test your image maps thoroughly across multiple browsers and devices to ensure that they work as intended. Check that all clickable areas are functional and that the correct actions or URLs are associated with each area.
• Consider the size and resolution of your image when creating image maps. Large images may require more clickable regions and more precise coordinates, which can be time-consuming to create and may increase the likelihood of errors.
• Use CSS or JavaScript to enhance the functionality of your image maps, such as highlighting clickable regions on hover or displaying additional information about the target of each link.
• Avoid using image maps for critical content or navigation elements, as they may not be accessible or usable for all users. Instead, consider using alternative methods such as text links or buttons.

Accessibility Considerations

• Provide descriptive text for each clickable area using the alt attribute of the <area> element. This text should describe the function or purpose of the link associated with the clickable area.
• Ensure that the clickable areas are large enough to be easily clicked by users with mobility impairments. The W3C recommends a minimum size of 44 by 44 pixels for clickable areas.
• Consider using contrasting colors or patterns for clickable areas to make them easier to distinguish from the rest of the image. This can be especially important for users with color vision deficiencies.
• Test your image maps with a screen reader to ensure that all clickable areas are accessible and that the text associated with each area is read accurately.
• Provide keyboard accessibility for your image maps by allowing users to navigate between clickable areas using the tab key. Use the tabindex attribute to specify the order in which the clickable areas should be navigated.
• Avoid using image maps for critical content or navigation elements, as they may not be accessible or usable for all users. Instead, consider using alternative methods such as text links or buttons.
• Consider using ARIA attributes such as role and aria-label to provide additional accessibility information for screen reader users. For example, you could use role="link" and aria-label="Click to view more information" to provide more context for each clickable area.

Browser Compatibility