Struct Map 

pub struct Map;

The <map> element - defines an image map with clickable areas.

Purpose

The <map> element defines an image map - a collection of clickable areas on an image. Used with the <area> element to create hotspots on images that link to different destinations. Images reference maps using the usemap attribute.

Content Categories

• Flow Content
• Phrasing Content
• Palpable Content

Permitted Content Model

• Transparent content (typically contains <area> elements)

Common Use Cases

• Interactive geographic maps with region links
• Architectural floor plans with clickable rooms
• Organizational charts with clickable positions
• Product images with clickable component areas
• Educational diagrams with interactive sections

Key Attributes

• name: Name referenced by <img> element’s usemap attribute (required)

Example

<!-- Image map for a world map -->
<img src="/images/world-map.jpg" alt="World Map" usemap="#world">
<map name="world">
  <area shape="rect" coords="0,0,100,100" href="/regions/north-america" alt="North America">
  <area shape="rect" coords="100,0,200,100" href="/regions/europe" alt="Europe">
  <area shape="circle" coords="150,150,50" href="/regions/asia" alt="Asia">
  <area shape="poly" coords="50,200,100,250,50,300" href="/regions/africa" alt="Africa">
</map>

<!-- Interactive floor plan -->
<img src="/images/floor-plan.png" alt="Office Floor Plan" usemap="#office-map">
<map name="office-map">
  <area shape="rect" coords="10,10,110,60" href="/rooms/conference-a" alt="Conference Room A">
  <area shape="rect" coords="120,10,220,60" href="/rooms/conference-b" alt="Conference Room B">
  <area shape="rect" coords="10,70,110,120" href="/rooms/kitchen" alt="Kitchen">
</map>

<!-- Product feature map -->
<img src="/images/product.jpg" alt="Product Features" usemap="#features">
<map name="features">
  <area shape="circle" coords="100,100,30" href="#feature-1" alt="Feature 1: Display">
  <area shape="circle" coords="200,100,30" href="#feature-2" alt="Feature 2: Controls">
</map>

Accessibility

• Provide meaningful alt text for each <area> element
• Ensure keyboard navigation is available for all areas
• Consider providing a text-based alternative navigation
• Test with screen readers to ensure areas are announced properly
• Ensure sufficient clickable area size for touch interfaces

WHATWG Specification

• 4.8.13 The map element

Trait Implementations

impl HtmlElement for Map

const TAG: &'static str = "map"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl<T: PhrasingContent> CanContain<T> for Map

impl FlowContent for Map

impl PalpableContent for Map

impl PhrasingContent for Map