Copyright © Patrick Schmitz, 2003. You may freely use the associated information and may copy the HTML source, but not the media (which I borrowed from the MSDN samples).
Hyperlink elements can be timed with XHTML+SMIL (a.k.a. HTML+TIME), so that they are only sensitive to activation (usually by clicking on them), when the element is active.
The image below has an associated image map with <area> elements.
Each <area> element has a two second duration, and is placed in a
sequence that repeats. The same timing is applied to a sequence of labels below the
image, so that you can tell which area is currently active. If you click on a planet in the image,
while the associated <area> is active, it will traverse a link to a larger image of that planet.
If you click on any planet with an inactive <area> element,
nothing happens. Note the cursor as you move over the planets - only the active link shows the
pointer cursor.
In the HEAD a style block to bind the time behavior:
<style>
.time, t\:* { behavior:url(#default#time2); }
</style>
The area elements have duration and are wrapped in a repeating sequence:
<t:seq repeatCount="indefinite"> <area class="time" dur="2s" shape="rect" coords="0,0,82,126" href="media/sun.gif" alt="sun"> <area class="time" dur="2s" shape="circle" coords="90,58,3" href="media/merglobe.gif" alt="mercury"> <area class="time" dur="2s" shape="circle" coords="124,58,8" href="media/venglobe.gif" alt="venus"> <area class="time" dur="2s" shape="circle" coords="162,58,10" href="media/earglobe.gif" alt="earth"> <area class="time" dur="2s" shape="circle" coords="203,58,8" href="media/marglobe.gif" alt="mars"> <area class="time" dur="2s" shape="poly" coords="221,34,238,37,257,32,278,44,284,60,281,75,288,91,267,87,253,89,237,81,229,64,228,54" href="media/jupglobe.gif" alt="jupiter"> <area class="time" dur="2s" shape="poly" coords="288,19,316,39,330,37,348,47,351,66,349,74,367,105,337,85,324,85,307,77,303,60,307,50" href="media/satglobe.gif" alt="saturn"> <area class="time" dur="2s" shape="poly" coords="405,39,408,50,411,57,410,71,404,78,393,80,383,86,381,75,376,69,376,56,380,48,393,44" href="media/uraglobe.gif" alt="uranus"> <area class="time" dur="2s" shape="poly" coords="445,38,434,49,431,53,427,62,430,72,435,77,445,92,456,77,463,72,463,62,462,53,455,47" href="media/nepglobe.gif" alt="neptune"> <area class="time" dur="2s" shape="circle" coords="479,66,3" href="media/pluglobe.gif" alt="pluto"> </t:seq>