This is an overview of inline SMIL using the Timesheet Scheduler. It's 'non-standard', there isn't a W3C recommended way to add SMIL timing to HTML elements. So have fun with it, add jquery plugins maybe one day it can become a defacto standard.

Click on the blue html element to see the inline SMIL tree. The links are to the homepage of inline SMIL.


html

head

title

style

img {
transition : all 1s;
-o-transition : all 1s;
-moz-transition : all 1s;
-webkit-transition : all 1s;
z-index:-1;}

.crossfade img {
opacity: 0;}
.crossfade img[smil=active] {
opacity: 1;}

script

type="text/javascript" src="timesheets.js"

body

div mediaSync="#music" timeContainer="seq|par|excl|none (default)" repeatCount="indefinite"

p id="text" begin="01.00s" dur="06.00s" timeAction="none|display|visibility|style|class: className|intrinsic (default)"

svg id="svg-text"

img smil:begin="svg-text.click" smil:end="svg-text.click" alt="cool pic" src="cool.jpg"

audio id="music" preload="auto" controls="controls"

source src="song.ogg" type="audio/ogg" /
source src="song.mp3" type="audio/mpeg" /


Creative Commons License
Creative Commons Attribution 3.0
Jose Ramirez 2012