Zeitgesteuerte Ereignisse mit HTML? Möglich wird dies mit dem
offiziellen W3C Standard HTML+Time. Diese Einführung gibt einen
Einblick in HTML+Time 1 bzw. HTML+Time 2, und bringt ihnen diese
Technik ein wenig näher.
HTML + Time ist eine auf XML basierte HTML Erweiterung. Mit einigen
HTML+Time Befehlen ist es möglich, zeitgesteuert Elemente wie
Texte, Grafiken aber auch Multimedia Objekte anzuzeigen.
Es gibt bisher zwei Versionen von HTML+Time. HTML+Time 1 wird vom
InternetExplorer ab der Version 5.0 unterstützt. HTML+Time
2 wird bisher nur vom Internet Explorer ab der Version 5.5 unterstützt.
HTML+Time ist auf der Idee von Microsoft entwickelt worden.
Dieser hat HTML + Time in den DHTML Parser integriert. D.h. das
HTML+Time in Verbindung mit Stylesheets genutzt wird. Über
das Stylesheet, bzw. über eine CSS Klasse wird die aktuelle
Zeit ermittelt. Diejenigen Elemente, die mit HTML+Time bearbeitet
werden verweisen auf diese CSS Klasse, und durch das setzten einiger
Attribute kann der Timer gesteuert werden.
Ein Dokument das HTML+Time 1 verwendet sollte den Namespace
für die HTML+Time 1 Elemente definieren. Über diesen Namespace
erkennt der Browser, um was für Elemente es sich handelt, und
es zu keinen Konflikten zwischen gleichlautenden Elementen kommt.
html_time_1.html
<html>
<head>
<xml:namespace prefix="t" />
<title>HTML+Time</title>
</head>
<body>
<p>HTML+Time ist klasse!</p>
</body>
</html>
Dieses Dokument ist jetzt nicht weiter interessant, es wird lediglich
aufgezeigt, wie der Namespace "t" definiert wird.
Die erste Zeitsteuerung
Nun wollen wir das erste zeitgesteuerte Ereignis definieren. Zunächst
einmal muss die aktuelle Uhrzeit ermittelt werden. Wie oben bereits
erwähnt geschieht dies durch ein CSS Style Klasse.
<style type="text/css">
.time { behavior: url(#default#time); }
</style>
Dabei ist es wichtig, das diese Klassendefinition genau so geschrieben
ist. Es wird dabei ein "Verhalten" der Klasse definiert,
der Internet Explorer interpretiert dies nur bei korrekter Syntax
richtig.
Mit dieser CSS Klasse wird auf die Version 1 von HTML+Time
verwiesen. Das Ergebnis ist hierbei ab dem InternetExplorer 5 zu
sehen.
Auf die Version 2 von HTML+Time wird wie folgt verwiesen.
.time { behavior: url(#default#time2); }
Was bei den Verwendung der verschiedenen Versionen wichtig ist,
wird nachfolgend erklärt.
html_time_2.html
<html>
<head>
<title>HTML+Time</title>
<xml:namespace prefix="t" />
<style type="text/css">
.time { behavior: url(#default#time); }
</style>
</head>
<body>
<p>HTML+Time ist klasse!</p>
<img src="werbung.gif" width="468"
height="60" class="time" t:start="0"
t:dur="10" t:timeaction="display" />
</body>
</html>
Der Effekt dieser Anwendung ist vielleicht schon aus den einzelnen
verwendeten Attributen erkennbar. Bei dem <img> Element
wird über das class-Attribut auf die Klasse "time"
verwiesen. Der InternetExplorer erkennt jetzt, das es sich hierbei
um ein Element handelt, welches HTML+Time verwendet.
Die verschiedenen Attribute, welche mit dem Namespace t beginnen,
sind HTML+Time 1 Attribute. Über das Attribut t:start
wird angegeben, ab wann der Timer starten soll. Da der Wert auf
0 gesetzt ist, startet der Timer sofort. Mit t:dur wird die
Dauer des Timers angeben, in dem Fall sind es 10 Sekunden. Auch
Werte, die kleiner als 1 können angegeben werden, wie z.B.
0.5 für eine halbe Sekunde.
Das interessanteste Attribut kommt erst zum Schluss. Über t:timeaction
wird die Aktion definiert, die in dem Zeitraum von 0 – 10 passieren
soll. Es wird die Grafik folglich 10 Sekunden angezeigt (display),
und dann verschwindet diese.
HTML+Time 1 oder HTML+Time 2
Wie man es von Microsoft her kennt, ist alles recht kompliziert.
Unser Beispiel ist für alle IE Versionen ab 5.0 erstellt worden.
HTML+Time 2 bietet jedoch noch einige Funktionen mehr als HTML+Time
1.
Doch Microsoft hat, wie so oft, einen verwirrenden Schritt gemacht.
In HTML+Time 2 wird der Namespace gar nicht mehr benötigt,
laut Microsoft sollte dieser jedoch definiert werden.
Um dies zu verdeutlichen, nochmals unser HTML+Time Beispiel, dieses
mal aber nur für HTML+Time 2.
html_time_3.html
<html>
<head>
<title>HTML+Time</title>
<xml:namespace prefix="t" />
<style type="text/css">
.time { behavior: url(#default#time2); }
</style>
</head>
<body>
<p>HTML+Time ist klasse!</p>
<img src="werbung.gif" width="468"
height="60" class="time" start="0"
dur="10" timeaction="display" />
</body>
</html>
Die Verwendung des Namespaces fällt komplett weg, die Definition
sollte aber vorhanden sein!
HTML+Time bietet viele Möglichkeiten. Mit unserem Beispiel
könnte man ein Werbebanner nur einen gewissen Zeitpunkt einblenden,
und dann verschwinden lassen. Leider funktioniert dies bisher nur
mit dem Internet Explorer.