SMIL (Synchronized Multimedia Integration Language)

SMIL is useful for adding animation to your web pages. It only works with IE 5.5 at the present. You use it to dynamically control the style of the page using timers. Here's how to do it.

The first thing you need is to tell the browser your using SMIL so start your page with:

<html xmlns:smil="urn:schemas-microsoft-com:time">
<head>
<style>
 smil\:* { behavior:url(#default#time2) }
 time:*  { behavior:url(#default#time2) }
</style>
</head>
<body>

You can add anything you like; title, meta tags etc. You don't need to understand this part to use it. I certainly don't:)
Now the good stuff...
Set up a div tag with the styles you want to control. We will create a billboard that moves and changes color.

<div id="billboard" align="center"
 style="width:250;height:25;position:relative;top:0;left:0;background-color:#00ff00;font-size:12pt">
 <a href="../index.html">Roughfish World Software</a>
</div>

Nothing too special about that if your familiar with styles. Now lets animate it!

<smil:par begin="billboard.onmouseover" end="billboard.click">
 <smil:animateColor targetElement="billboard" attributeName="background-color"
  values="#ff0000;#0000ff" begin="0s" dur="4s" autoreverse="true" />
</smil:par>
<smil:par repeatCount="indefinite" begin="billboard.click">
 <smil:animateMotion begin="0" dur="3" calcMode="spline" targetElement="billboard"
   values="0,0;300,0;0,0" fill="hold" keySplines="0 .75 .5 1;0 .5 .75 1" keyTimes="0;.5;1" />
</smil:par>

Run your mouse over the sample below and then click it.

Roughfish World Software