Timed Hyperlink Sample

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.

Solar System sun mercury venus earth mars jupiter saturn uranus neptune pluto











In the HEAD a style block to bind the time behavior:

 .time, t\:* { behavior:url(#default#time2); }

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">