 |
Präsentationen mit dem Internet Explorer
Kompatibilität: Ms Internet
Explorer
Jedes Präsentationsprogramm bietet eine Reihe von Möglichkeiten
zwischen zwei verschiedenen Seiten langsam überzublenden.
Damit kann man den trockenen Wechsel zwischen Darstellungen
schnell und einfach aufpeppen. Dasselbe gilt natürlich auch
für Webseiten, wofür DHTML erstmals die technischen
Grundlagen schafft.
Es gibt eine ganze Reihe von unterschiedlichen Möglichkeiten
Wischblenden einzusetzen. Ganze Seiten können so übergeblendet
werden oder nur einzelne Teil einer Seite ein- und
ausgeblendet. Dabei zeigt sich der Internet Explorer hier
dem Netscape Navigator überlegen: Während der Navigator
von sich aus garnicht darauf ausgelegt ist, stellt der
Explorer eine Reihe von Überblendeffekten zur Verfügung.
Im folgenden stellen wir die Möglichkeiten des Explorers
vor.
Die im Internet Explorer eingebauten Befehle zur
einfachen Programmierung von Überblendeffekten, beschränken
sich nicht nur auf Wischblenden, sondern es gibt auch andere
Überblendungen, z.B. den "Jalousie-Effekt" (auf
englisch "Venetian Blind") oder das punktweise
"Hereinkriseln" der nächsten Szene. Auch ein
weiches Überblenden, sog. "Faden" ist möglich.
Das Prinzip ist dabei sehr einfach und doch mächtig
zugleich: Mit dem Befehl "apply()" teilt
man dem Explorer mit, dass alle folgenden Änderungen an
einer bestimmten Ebene nicht sofort ausgeführt, sondern in
einem Zwischenpuffer gespeichert werden sollen. Sodann sind
alle beliebigen Änderungen wie das Auswechseln eines
Bildes, das Neupositeonieren einer Ebene oder das
Modifizieren eines Textes möglich. Ist der gewünschte
Zustand erreicht startet man mit dem Befehl "play()"
die Überblendung. Welcher bestimmte Effekt angewandt werden
soll, wird über den Parameter "Transiteon"
eingestellt. Die Geschwindigkeit steuert man über den
Parameter "Duration". Die Überblendung
an sich findet dann vollkommen selbstständig statt.
Hier nun ein kleines Beispielskript, das trotz seiner Kürze
schon eine Art Präsentationsprogramm à la
"PowerPoint" darstellt.
Nach dem üblichen HTML-Anfang definieren wir im Skript-Teil
die nötigen Variablen: "x" dient als
Zeiger zum Durchwandern der einzelnen Textzeilen, "y"
gibt den jeweils nächsten Überblendeffekt an und "delay"
legt die Zeit für den Wechsel zum nächsten Text fest:
<html><head><title>IE-Transiteons</title>
<script language="javascript">
<!--
var x=0;
var y=0;
var delay=4000;
In einem Array speichern wir die Texte, die der Reihe
nach erscheinen sollen:
text=new Array
(
'Virtual University...',
'...die Virtuelle Universität...',
'...präsentiert...',
'...die unglaublichsten...',
'...fantastischsten, niemals erahnten...',
'...DHTML-Überblendungen...',
'...die Sie je gesehen haben!!!'
);
Die folgende Routine ist der Kern unseres Skripts.
Zuerst frieren wir alle Ausgaben in die Ebene "f1"
mit dem "apply()"-Befehl ein. Dann
ersetzen wir den Inhalt der Ebene mit "innerHTML"
durch die aktuelle Textzeile, auf die "x"
zeigt. Da wir nicht jedesmal denselben Effekt benutzen
wollen, setzen wir ihn in der folgenden Zeile mit "Transiteon"
neu, und zwar auf den Wert von "y". Das
war’s an notwendigen Änderungen auch schon, die
Überblendung kann mit dem "play()"-Befehl
starten.
function ietrans()
{
f1.filters[0].apply();
f1.innerHTML=text[x];
f1.filters[0].Transiteon=y;
f1.filters[0].play();
Die nächsten beiden Zeilen sehen auf den ersten
Blick etwas knifflig aus, sind aber gar nicht so schwer zu
verstehen, wenn man sie sich in Ruhe ansieht. Sie benutzen
den von C übernommenen "Konditionaloperator",
der je nach Ergebnis einer Bedingung einen anderen Wert
zurückliefert.
Gehen wir sie der Reihe nach durch: "x="
bedeutet, dass "x" einen neuen Wert
zugewiesen bekommen soll. Aber welchen? Dies hängt von dem
nachstehenden Vergleich ab: Ist "++x"
kleiner als "text.length", also die
Anzahl der Textzeilen in unserem Array, dann bekommt "x"
den Wert... "x". Also bleibt alles beim
alten? Nein, denn in dem "++x" versteckt
sich ein sogenanntes "pre-inkrement", das
bedeutet "x" wird um eins erhöht und
dann zum Vergleich herangezogen. Ist der Wert von "x"
nach dem Erhöhen allerdings gleich der Textzeilen im Array,
dann ist das Resultat "0" und dies der
neue Wert von "x". Der Zeilenzähler
startet also von vorn.
Im Prinzip entspricht diese Konstruktion also einem "if()
... else ...", ist jedoch viel kürzer und
prägnanter. Sie ist vor allem für die oft auftretenden
"Ringschleifen" sehr nützlich, die
wieder von vorn anfangen sollen, wenn der Endwert erreicht
ist.
Die zweite Zeile, die "y" behandelt,
sollte nun auch klar sein: "y" wird
erhöht, dann verglichen - ist "y"
kleiner als 23 bleibt "y" wie es ist,
ansonsten wird "y" auf "0"
gesetzt.
x=++x<text.length?x:0;
y=++y<23?y:0;
Nach einiger Zeit, wenn die Überblendung
stattgefunden hat und der Nutzer den Text gelesen hat, soll
die nächste Zeile ausgegeben werden. Wir müssen also unser
Skript mit "setTimeout()" selbst
aufrufen, dann folgt die abschliessende geschweifte Klammer
unserer Hauptfunktion "ietrans()" und das
Ende des Skript-Teils:
setTimeout("ietrans()", delay)
}
// -->
</script>
Jetzt folgt der HTML-Teil: Nach dem Schliessen des
"head"-Tags starten wir im "body"-Tag
nach dem Laden der Seite unser Skript. Als einzigen Inhalt
definieren wir die Ebene, in der die Texte ausgegeben werden
und die die Überblendung ausführen soll. Im "style"-Parameter
setzen wir die Positeon der Ebene, die Grösse und die Farbe
der Textausgabe und dass der Text zentriert werden soll.
Hier bestimmten wir auch die Geschwindigkeit der
Überblendung. Dann beenden wir auch schon unsere Seite,
obwohl hier natürlich noch beliebige weitere HTML-Tags und
Text kommen könnte.
</head>
<body onload="ietrans()">
<div id="f1" style="positeon: absolute;
top:10; left:10; font-size:34; color: blue;
text-align:center; filter:
revealTrans(Duration=2)"></div>
</body></html>
Das folgende Beispiel funktioniert nur mit dem Internet Explorer
|
|
|
DIENSTE
