HOME - SMIL: Version 2.1 vom 30.06.2005 © Wolfgang von Keitz

Vorwort
Grundlagen
Layout
Zeit

Bild, Text und Ton

Überblick
Das Mediaobjektmodul
Überblendungen
Animation
Hyperlinks
Die Real-Pix-Datei
Die Real-Text-Datei

SMIL und HTML
Referenz
Beispiele
Anhang
Quellen

4. Bild, Text und Ton

4.5. Hyperlinks

Mit SMIL lassen sich Hyperlinks definieren, wie wir sie von HTML her kennen. Links können:

  • ein bestimmtes Objekt mit einem anderen Objekt verbinden; so kann der Nutzer durch Klicken auf den Link statt des ersten Objekts das zweite Objekt sehen;
  • ein Objekt mit einer HTML-Seite verbinden, die durch Anklicken des Links im Standard-Browser sichtbar wird;
  • ein Objekt mit einem anderen SMIL-Dokumente verbinden, so dass eine völlig neue SMIL-Präsentation gestartet wird.

SMIL kennt neben Links, die sich auf die gesamte Fläche eines Multimediaobjekts beziehen, auch die Definition von Hotspots, also Links, die sich lediglich auf einen flächenmässigen Ausschnitt eines Multimediaobjekts beziehen. In HTML spricht man in diesem Zusammenhang von Image-Maps.

SMIL kennt aber neben der flächenmäßigen Begrenzung von Links (Hotspots) auch die zeitliche Begrenzung von Links. Dies bedeutet, dass man Links für einen bestimmten Zeitraum aktivieren und wieder deaktivieren kann.

4.5.1. Das <a>-Element
4.5.1.1. Der Objekt-zu-Objekt-Link

Im einfachsten Fall verbindet ein Link ein Objekt mit einem anderen Objekt . Wie in HTML definiert man auch in SMIL diesen Link mit dem <a href=....>-Tag als Eröffnungstag und dem </a>-Tag als Schlusstag.

Formal gesehen wird der <a href=...>-Tag vor dem Medienelement und der </a>-Tag nach dem Medienelement plaziert. Auf diese Weise wird das im href-Attribut genannte Objekt mit dem im Medienelement spezifizierten Objekt verlinkt. Beispiel: 

<smil>
<head>
<layout>
<root-layout width="450" height="300" background-color="#FAEBD7" />
<region id="region_1" left="75" top="50" width="310" height="200"
           background-color="#000080" fit="fill" />
</layout>
</head>
<body>
<a href="bild.jpg">
<img src="bild2.jpg" region="region_1" />
</a>
</body>
</smil>

In diesem Beispiel ist das Bild "bild.jpg" mit dem Bild "bild2.jpg" per Link verbunden. Wird die Präsentation gestartet, wird zunächst das Bild "bild.jpg" eingeblendet. Führt man den Cursor über das Bild, verändert sich das Cursor-Icon in eine Hand; die Hand zeigt an, dass das gesamte Bild durch einen Link mit einem anderen Objekt verbunden ist. In der Statuszeile des Players wird ausgewiesen, auf welches Objekt der Link verweist: "bild2.jpg".

Wird durch Klicken des Bildes "bild.jpg" der Link ausgelöst, wird eine neue Präsentation mit "bild2.jpg" gestartet. Die Präsentation des neuen Bildes wird dabei völlig unabhängig von der bisherigen Präsentation gesehen; d.h. weder die Definition des Präsentationsfensters durch das <root-layout>-Element noch die Definition des Präsentationsbereiches durch das <region>-Element gelten für das neue Bild. Dieses wird vielmehr in seiner Originalgröße präsentiert. Um das neue Bild ebenfalls im entsprechenden Layout präsentieren zu können, muss der Link nicht zum Bild direkt sondern zu einer zweiten SMIL-Datei, in der sich die entsprechenden Layout-Informationen befinden, definiert werden. Dies wird im nachfolgenden Beispiel gezeigt.

Bei der Verwendung eines Links ist zu beachten, dass

  • ein Player keinen "zurück"-Button besitzt, um nach einem Klick wieder zu dem ursprünglichen Objekt zurückkehren zu können;
  • ein Player nur einmal gestartet werden kann, es also nicht möglich ist, mehrere Präsentationen in mehreren Playerfenstern ablaufen zu lassen, wie wir das vom Browser her kennen;
  • sämtliche Layoutdefinitionen durch das Klicken eines Links gelöscht werden; sollen die Definitionen erhalten bleiben, muss der Link zu einem SMIL-Dokument führen, in dem die entsprechenden Layoutdefinitionen und Medienlemente abgelegt sind.
4.5.1.2. Der Objekt-zu-HTML-Link

Soll von einer Multimediapräsentation aus auf eine HTML-Seite verwiesen werden, kann dies problemlos durch einen Link von dem im RealPlayer sichtbaren Objekt zur HTML-Seite erfolgen. Um den Standardbrowser, in dem die HTML-Seite sichtbar werden soll, zu starten, muss in das <a>-Element lediglich das Attribut show mit dem Attributwert new eingefügt werden.

Im folgenden Beispiel wird mit show=new erreicht, dass:
  • beim Klicken des Links die Präsentation im Realplayer weiterläuft,
  • der Standardwebbrowser des Nutzers gestartet wird, und
  • das zweite Bild im Webbrowser sichtbar wird: 
<smil>
 <head>
  <layout>
   <root-layout width="147" height="116" background-color="yellow" />
   <region id="region_1" left="8" top="10" width="116" height="81"
           background-color="white" fit="slice" />
  </layout>
 </head>
 <body>
<a href="bild2.jpg" show="new">
<img src="bild.jpg" region="region_1" />
</a>
</body>
</smil>

Im obenstehenden Beispiel wird der Link von dem im RealPlayer sichtabren Bild zur HTML-Seite „Beispiel.html“ gesetzt. Wird auf das Bild geklickt, wird der Standardbrowser gestartet; die HTML-Seite wird im Standardbrowser sichtbar.

Das <a>-Element besitzt wie gesagt ein Attribut, mit dem gesteuert werden kann, ob das verlinkte Mediaobjekt in einem Player oder in einem Browser präsentiert wird. Das show-Attribut kennt die Parameter replace, new und pause.

Wird das show-Attribut mit dem Wert "pause" benutzt, wird die Präsentation des Bildes zunächst einmal an der betreffenden Stelle angehalten, bis der Nutzer mit der Play-Taste die Präsentation fortsetzt. Das neue Bild wird ebenfalls im neu gestarteten Standardbrowser gezeigt. Beispiel:

<smil>
 <head>
  <layout>
   <root-layout width="147" height="116" background-color="yellow" />
   <region id="region_1" left="8" top="10" width="116" height="81"
           background-color="white" fit="slice" />
  </layout>
 </head>
 <body>
<a href="bild2.jpg" show="pause">
<img src="bild.jpg" region="region_1" />
</a>
</body>
</smil>

Wird das show-Attribut hingegen mit dem "replace"-Wert benutzt, wird die Präsentation des ersten Bildes durch die des zweiten Bildes im Player ersetzt. Replace wird als Voreinstellung automatische benutzt, wenn das show-Attribut nicht angegeben ist.

4.5.1.3. Der SMIL-zu-SMIL-Link

Das folgenden Beispiel besteht aus zwei SMIL-Dokumenten. Im ersten SMIL-Dokument wurde der Link nicht direkt auf das Multimediaobjekt sondern auf ein SMIL-Dokument, das in der Datei ex261c.smi abgelegt ist, definiert. In diesem Dokument wurden dieselben Layoutdefinitonen wie im ersten Dokument verwendet. In diesem Fall wird das zweite Bild dann im selben Präsentationsbereich gezeigt wie das erste Bild.

Erstes SMIL-Dokument mit dem Link auf ein zweites SMIL-Dokument: 

<smil>
<head>
<layout>
<root-layout width="450" height="300" background-color="#FAEBD7" />
<region id="region_1" left="75" top="50" width="310" height="200"
           background-color="#000080" fit="fill" />
</layout>
</head>
<body>
<a href="ex261c.smi">
<img src="bild.jpg" region="region_1" />
</a>
</body>
</smil>

Zweites SMIL-Dokument mit dem Dateinamen ex261c.smi und dem Medienlement für bild2.jpg:

 
<smil>
<head>
<layout>
<root-layout width="450" height="300" background-color="#FAEBD7" />
<region id="region_1" left="75" top="50" width="310" height="200"
           background-color="#000080" fit="fill" />
</layout>
</head>
<body>

<img src="bild2.jpg" region="region_1" />
</body>
</smil>

Wird die Präsentation gestartet, erscheint zunächst das erste Bild im Präsentationsfenster. Dieses Bild besitzt einen Link auf das zweite Bild. Wird dieser Link geklickt erscheint das zweite Bild im Präsentationsfenster.

Diese Technik kann auch benutzt werden, wenn man von einer SMIL-Datei auf ein andere SMIL-Datei verlinkt, und dabei an eine bestimmte Stelle dieser SMIL-Datei springen möchte. In diesem Fall ist in der Linkreferenz der Dateinamen der SMIL-Datei und der id-Name des betreffenden Elements verbunden duch ein Doppelkreuz anzugeben. Beispiel:

<a href="ex261c.smi">

Mit SMIL können Links auf andere SMIL-Dateien oder auf andere Abschnitte derselben SMIL-Datei (interner Link) definiert werden. In HTML-Dokumenten werden interne Links dadurch definiert, dass an einer bestimmten Stelle eines HTML-Dokuments ein Anker oder target eingefügt wird, der dann als Zielpunkt des Links benutzt werden kann. In SMIL wird dieser Anker bzw. target durch das "id"-Attribut unterschiedlichster Elemente definiert.

Im folgenden Beispiel wird mit Hilfe des id-Attributs jedem Element ein Name zugewiesen. Dieser Namen kann dann als Anker oder target für den Link benutzt werden. 

<smil>
 <head>
  <layout>
   <root-layout width="247" height="216" background-color="yellow" />
   <region id="region_1" left="8" top="10" width="216" height="181"
           background-color="white" fit="slice" />
  </layout>
 </head>
 <body>
<a href="#melonen">
<img id="smily" src="bild2.jpg" region="region_1" />
</a>
<img id="melonen" src="melonen.jpg" region="region_1" />
</body>
</smil>

Wird die Präsentation gestartet, erscheint zunächst das erste Bild (Smily) im Präsentationsfenster. Dieses Bild besitzt einen Link auf das zweite Bild (Melonen). Wird dieser Link geklickt, erscheint das zweite Bild im Präsentationsfenster.

Diese Technik kann auch benutzt werden, wenn man von einem SMIL-Dokument auf ein anderes SMIL-Dokument verlinkt, und dabei an eine bestimmte Stelle dieses SMIL-Dokuments springen möchte. In diesem Fall ist in der Linkreferenz der Dateinamen der SMIL-Datei und der id-Name des betreffenden Elements verbunden duch ein Doppelkreuz anzugeben. Beispiel:

<a href="ex263b.smi#melonen">
<img src="bild.jpg" region="region_1" />
</a>

Hierbei sind allerdings einige Einschränkungen zu beachten:

  • Links können nur zu Elementen definiert werden, die ein id-Attribut kennen.
  • Wird ein Link zu einem speziellen Medienelement einer <par>-Gruppe definiert, wird trotzdem die ganze Grupppe in der Präsentation zu sehen sein; es ist also nicht möglich, durch Links einzelne Medienelemente von der Präsentation auszuschliessen.
  • Mit Hilfe des <anchor>-Elements lassen sich Hotspots definieren, die dann mit unterschiedlich spezifiezierten Links belegt sein können.
4.5.2. Hotspots - Das <area>-Element

Während das <a>-Element die gesamte Präsentationsfläche eines Medienobjekts als Link benutzt, bietet das <area>-Element die Möglichkeit, einen bestimmten Bereich zu definieren, der als Link verwendet wird. Dies bedeutet, dass mit dem <area>-Element, Hotspots definiert werden können. Neben dieser flächenmässigen Begrenzung von Links kennt SMIL auch die zeitliche Begrenzung eines Links. In SMIL 1.0 wurde hierfür das <anchor>-Element benutzt. Dieses Element wurde in SMIL 2.0 zu Gunsten des <area>-Elements aufgegeben. Das <area>-Element besitzt gegenüeber dem <anchor>-Element eine wesentlich erweiterte Funktionalität. Das <area>-Element wird benutzt, um Links zu einer HTML-Seite, einem XML-dokument oder einer anderen SMIL-Präsentation herzustellen. Das <area>-Element kann dabei wie das <a>-Element unterschiedliche Verfahren zur Aktivierung des Links nutzen. Im einfachsten Fall wird der Klick auf einen bestimmten Bereich eines Medienobjekts den Link auslösen. Es ist aber auch möglich, die Auslösung des Links an ein zeitliches Ereignis oder an die Eingabe eines definierten Zeichens zu koppeln.

Im einfachsten wird das <area>-Element in das Mediaelement eingefügt. Beispiel:

<img src="bild.jpg" region="region_1">
<area href="bild2.jpg" show="pause" />
</img>

Das <img>-Element wird nicht wie sonst nach dem letzten Attribut mit einem Schrägstrich "/" abgeschlossen wird. Vielmehr wird das <img>-Element wird mit dem <img ....>-Tag geöffnet. Dem noch offenen <img>-Element folgt dann das <area>-Element, das nach dem letzten Attribut mit einem Schrägstrich "/" abgeschlossen wird. Das noch offene <img>-Element wird dann mit dem </img>-Tag abgeschlossen. Bis zu diesem Punkt unterscheidet sich das <area>-Element nicht vonm <a>-Element. Während sich das <a>-Element aber immer auf das gesamte Medienobjekt bezieht, können mit dem <area>-Element Bereiche des Medienobjekts als Linkfläche (Hotspot) markiert werden.

4.5.2.1. Definition eines permanenten Hotspots

Um einen Hotspot zu erzeugen, werden im <area->Element die räumlichen Koordinaten des Hotspots mit dem coords-Attribut definiert. Vervollständigen wir unser Beispiel:

<img src="bild.jpg" region="region_1">
<area href="bild2.jpg" show="pause" coords="20,40,100,80" />
</img>

Die Werte der Koordinaten können in Pixeln oder in Prozent angegeben werden. In unserem Beispiel sind die Koordinaten als Abstände in Pixeln angegeben. Die Koordinatenwerte beziehen sich auf den

  • linken Rand des Hotspots,
  • oberen Rand des Hotspots,
  • rechten Rand des Hotspots und
  • unteren Rand des Hotspots.

Die Massangaben der Koordinatenwerte werden als Abstand bezogen auf den linken bzw. oberen Rand des Bildes angegeben. In unserem Beispiel ist der Hotspot also 20 Pixel vom linken und 40 Pixel vom oberen Rand des Bildes entfernt; der Hotspot hat eine Breite von 60 Pixeln und eine Höhe von 40 Pixeln. Breite und Höhe des Hotspots ergeben sich aus der Differenz des linken und rechten bzw. des oberen und unteren Randes.

Werden für die Angabe der Hotspotkoordinaten Prozentwerte benutzt, so beziehen diese sich auf die Größe des Bildes. Wird unser Beispiel wie folgt modifiziert:

<img src="bild.jpg" region="region_1">
<anchor href="bild2.jpg" show="pause" coords="25%,25%,75%,75%" />
</img>

so bedeutet dies, dass sich der Hotspot genau in der Mitte des Bildes befindet, und eine Breite und Höhe von jeweils 50% des Bildes besitzt. Der linke und rechte Rand des Hotspots befindet sich 25% bzw. 75% der Bildbreite vom linken Rand des Bildes entfernt; der obere und untere Rand des Hotspots befinden sich 25% bzw. 75% der Bildhöhe vom oberen Rand des Bildes entfernt.

4.5.2.2. Definition eines zeitlich begrenzten Hotspots

Mit dem <area>-Element lassen sich neben permanenten Hotspots auch zeitlich begrenzte Hotspots durch die Verwendung der Attribute "begin" und "end" definieren. Im folgenden Beispiel ist durch die Spezifikationen des begin- und end-Attributs der Link für das eingeblendete Bild nur die ersten 3 Sekunden aktiv:

<img src="bild.jpg" region="region_1">
<area href="bild2.jpg" show="pause" coords="25%,25%,75%,75%" begin="0s" end="3s" />
</img>

Es ist auch möglich, nur einen begin-Wert anzugeben. In diesem Fall wird der Link nach der spezifizierten Zeit aktiv und bleibt bis zum Ende der Präsentation aktiv. Sind keine begin- und end-Werte angegeben, bleibt der Link solange aktiv, wie das Bild auf dem Bildschirm erscheint.

4.5.3. Die Link-Module

Nach diesen einführenden Beispielen sollen die einzelnen Link-Module systematische erläutert werden. Es handelt sich dabei um das Basic Linking Modul und das Objekt Linkung Modul sowie um das Linking Attributes Modul.

4.5.3.1. Das Linking Attributes Modul

Das Linking Attributes Modul definiert einige Attribute, die allgemeine Gültigkeit für alle Link-Elemente besitzen. Dies sind im einzelnen:

  • accesskey Tastenkombination der Tastatur, deren Eingabe durch den Benutzer den Link auslöst. Beispiel.
  • actuate bestimmt ob der Link automatisch oder aufgrund eines Ereignisses ausgeführt wird, mit den Attributwerten:
    • onRequest der Link wird auf Anfrage ausgeführt (Voreinstellung);
    • onLoad wird automatisch ausgeführt, wenn das Quellobjekt aktiv wird.
  • alt Alternativer Text, der statt des Medienobjekts angezeigt wird.
  • destinationLevel Lautstärke des Zielobjekts in Prozent; Voreinstellung 100%. Beispiel.
  • destinationPlaystate Verhalten des Zielobjekts mit folgenden Attributwerten:
    • play Das Zielobjekt beginnt nach Auslösen des Links (Voreinstellung);
    • pause Das Zielobjekt wird auf Pause gesetzt.
  • external spezifiziert ob das Zielobjekt durch die laufende Anwendung oder durch eine externe Anwendung geöffnet werden soll; mit den Attributwerten:
    • true externe Anwendung
    • false laufende Anwendung.
  • show Verhalten der Präsentation, wenn der Link ausgelöst wird mit folgenden Attribuwerten:
    • new Das Zielobjekt startet in einem neuen Kontext, ohne dass das Verhalten des Quellobjekts beeinflusst wird;
    • pause das Zielobjekt wird auf Pause gesetzt und das Quellobjekt startet in einem neuen Player (dieser Attributwert wird in SMIL 2.0 zu Gunsten von new in Verbindung mit dem Attribute sourcePlaystate und dem Attributwert pause aufgegeben;
    • replace Das Quellobjekt wird auf Pause gesetzt und das Zielobjekt beginnt (Voreinstellung).
  • sourceLevel Lautstärke des Quellobjekts in Prozent; die Voreinstellung beträgt 100%
  • sourcePlaystate Verhalten des Quellobjekts mit folgenden Attributwerten:
    • play Das Quellobjekt läuft nach Auslösen des Links weiter;
    • pause Das Quellobjekt geht nach Auslösen des Links n den Pause-Status;
    • stop Das Quellobjekt stoppt nach Auslösen des Links.
      Anmerkung: Die Attributwerte des show-Attributs haben eine höhere Wertigkeit.
  • tabindex Position in einer Linkfolge, die mit dem Tabulator abgegangen werden kann.; als Attributwerte werden Ziffern benutzt.
  • target id der Präsentationsumgebung, in der das Zielobjekt präsentiert werden soll
4.5.3.2. Das Basic Linking Modul

Das Basic Linking Modul wird durch die beiden Element <a> und <area> definiert.

4.5.3.2.1. Das <a>-Element

Die Funktionaltät des <a>-Elements in SMIL entspricht der Funktionalität des <a>-Elements in HTML. Ein <a>-Element besitzt zusätzlich zu den im Linking Attributes Modul genannten Attributen das href-Attribut:

href URL entsprechend der aus HTML bekannten Syntax.

Es sind folgende Beispiele denkbar:

  • Über einen Link wird eine neue Präsentation gestartet, die die alte Präsentation ersetzt. Beispiel.
  • Über einen Link wird eine neue Präsentation zusätzlich zur alten Präsentation gestartet. Beispiel.
  • Über einen Link wird eine neue Präsentation gestartet; die alte Präsentation wird auf Pause gesetzt. Beispiel.
4.5.3.2.2. Das <area>-Element

Das <area>-Element entspricht der Bedeutung des <area>-Elements in HTML 4. Mit seiner Hilfe können einzelne Bereiche im Quellobjekt definiert werden, die dann mit einem Link versehen werden können (Hotspots). In SMIL können diese Hotspots zeitlich begrenzt werden. Das <area>-Element ist synonym zum <anchor>-Element der SMIL Version 1. Es besitzt folgende Attribute:

  • accesskey Tastenkombination der Tastatur, deren Eingabe durch den Benutzer den Link auslöst.
  • alt Alternative Text, der statt des Medienobjekts angezeigt wird.
  • begin Start der Teilpräsentation mit dem Link.
  • coords spezifiziert die Koordinaten des Hotspots in Abhängigkeit von shape bezogen auf das Quellobjekt; es gilt:
    • x1, y1, x2, y2 für ein Rechteck, wobei x1 und y1 das linke obere Eck und x2 und y2 das rechte untere Eck bezeichnen;
    • x, y, r für einen Kreis, wobei x und y den Mittelpunkt des Kreises und r den Kreisradius bezeichnen;
    • x1, y1, x2, y2, x3, y3, usw. für ein Polygon. Anmerkung: Wird das Bild durch Layout-Definitionen beschnitten, kann es zum Wegfall von Hotspots in der entsprechenden Präsentationsfläche kommen.
  • end Ende der Teilpräsentation mit dem Link.
  • href URL entsprechend der aus HTML bekannten Syntax.
  • id Eindeutige Benennung der Elementspezifikation.
  • nohref es existiert kein Link für diesen Hotspot.
  • shape Form des Hotspots mit den Attributwerten;
    • rect für Rechteck,
    • circle für Kreis und
    • poly für ein Polygon.
  • tabindex Position in einer Linkfolge, die mit dem Tabulator abgegangen werden kann.; als Attributwerte werden Ziffern benutzt.
  • target id der Präsentationsumgebung, in der das Zielobjekt präsentiert werden soll.
  • title Benennung des Hotspots.

Die Möglichkeiten dieses Elements sollen mit folgenden Beispielen demonstriert werden:

  • Zerlegung eines Videos in zeitliche Segmente. Beispiel.
  • Split des Bildschirms in zwei Segmente mit unterschiedlichen Links. Beispiel.
  • Hotspots bei zeitlich begrenzten Teilpräsentationen. Beispiel.
  • Links in Soundfile, die automatisch eine Folge von Browserfenster öffnen. Beispiel.
4.5.3.3. Das Object Linking Modul

Das Objekt Linking-Modul führt ein weiteres Attribut in das <area>-Element ein: Das fragment-Attribut. Dieses Attribut spezifiziert einen bestimmten Teil eines Objekts als Ausgangspunkt eines Links, wenn dieses Objekt eine HTML-Datei oder eine XML-Datei ist. Mit dieser Funktion können in der HTML/XML-Datei vorhandene Links ggbfs. überschrieben werden, um sie den Gegenbenheiten der SMIL-Präsentation anzupassen. Als Attributwerte können frei wählbare Zeichenketten benutzt werden.

Im untenstehenden Beispiel wird eine HTML-Datei in einer SMIL-Präsentation verwendet. Die HTML-Datei enthält Links, die in SMIL mit Hilfe des fragment-Attributs des area-Elements mit einem Link "Überschrieben" werden.

SMIL-Datei:

<smil xmlns="http://www.w3.org/2001/SMIL20/WD/Language">
<head>
<layout>
<region id="HTML" width="100" height="100"/> <region id="LinkText" width="100" top ="100"/>
</layout>
</head>
<body>
<par>
<text region="HTML" src="menu.html" dur="indefinite">
<area fragment="link1" href="#LinkOne"/>
<area fragment="link2" href="#LinkTwo"/>
</text>
<excl dur="indefinite" >
<text id="LinkOne" region="LinkText" src="Link1.html" dur="indefinite"/>
<text id="LinkTwo" region="LinkText" src="Link2.html" dur="indefinite"/>
</excl>
</par>
</body>
</smil>

HTML-Datei:

<html>
...
<A NAME="link1" HREF="overridden1.html">link one</A>
<A NAME="link2" HREF="overridden2.html">link two</A>

 

zurueck top weiter