How Does SMIL Use the Area Element for Spatial Hotspots?

Synchronized Multimedia Integration Language (SMIL) uses the <area> element (also known as <anchor> in earlier specifications) to partition visual media into interactive spatial sub-regions called hot-spots. By nesting <area> elements inside media objects such as videos, animations, or images, authors can assign specific geometric boundaries, temporal active windows, and hyperlink destinations or event triggers to localized parts of the visual presentation.

Core Purpose and Structure of the Area Element

In SMIL presentations, media elements like <video> or <img> typically act as single continuous visual objects. The <area> element extends these objects by creating clickable or reactive subsections without requiring the underlying media file to be segmented.

An <area> element is always placed as a child inside a media tag. When the media element renders, the SMIL player evaluates the geometry defined inside the <area> tag and maps user interactions—such as clicks, mouse-overs, or touch events—specifically to that sub-region.

<video src="presentation.mp4" region="main_stage">
  <area shape="rect" coords="10, 10, 150, 100" href="https://example.com/details" />
</video>

Defining Spatial Boundaries with Coordinates and Shapes

Spatial mapping relies on two primary geometric attributes: shape and coords. These attributes mirror traditional HTML image maps but operate dynamically within the SMIL layout system.

• Rectangles (shape="rect"): Requires four coordinate values representing the top-left and bottom-right corners: coords="left, top, right, bottom". Coordinates can be defined as absolute pixel offsets or relative percentages.
• Circles (shape="circle"): Requires three values indicating the center position and radius: coords="center_x, center_y, radius".
• Polygons (shape="poly"): Accepts a sequence of coordinate pairs (coords="x1, y1, x2, y2, ..., xN, yN") to define complex, non-standard visual boundaries.

When percentage coordinates are used (for example, coords="0%, 0%, 50%, 100%"), the hot-spot scales automatically if the parent media element changes size or aspect ratio during playback.

Combining Spatial Hot-Spots with Temporal Control

A defining advantage of SMIL over static markup is the ability to bind time-based attributes directly to spatial regions. An <area> element supports standard SMIL timing attributes, including begin, dur, and end.

<video src="interactive_lecture.mp4">
  <!-- Hotspot active only between second 10 and second 25 -->
  <area shape="circle" 
        coords="50%, 50%, 20%" 
        begin="10s" 
        dur="15s" 
        href="#supplemental_diagram" />
</video>

In this setup, the hot-spot appears and disappears independently of the parent video playback state. The user can interact with the bounded region only during its active temporal interval, enabling dynamic annotations and contextual links that track appearing and disappearing objects on screen.

Hyperlinking and Event Dispatching

The <area> element facilitates two interaction models:

1. Navigation Linking: Using the href attribute, clicking the hot-spot navigates the user to an external web page, jumps to an internal SMIL timeline marker, or alters the state of another presentation module via the target attribute.
2. Event Triggering: The <area> element can be assigned an id, allowing other media components across the SMIL document to synchronize with it. Other elements can trigger transitions or start playing when an event like areaId.activateEvent or areaId.inBoundsEvent fires.

By unifying geometric mapping, hyperlinking, and timeline synchronization, the <area> element delivers fine-grained interactivity across complex visual multimedia presentations.