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

Sun

Mercury

Venus

Earth

Mars

Jupiter

Saturn

Uranus

Neptune

Pluto


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>