SELFHTML: Dynamisches HTML / DHTML-Modelle / Dynamische Filter (nur Microsoft)

	Dynamische Filter (nur Microsoft)
	Allgemeines zu dynamischen Filtern Einfaches Dynamisches Ändern von Filterwerten Fließende Übergänge mit dem blendTrans-Filter Fließende Übergänge mit dem revealTrans-Filter Ein-/Ausblendeffekte Fließende Seitenübergänge

Allgemeines zu dynamischen Filtern

Der MS Internet Explorer unterstützt ab der Version 4.x spezielle CSS-Eigenschaften, die so genannten Filter. Mit Hilfe solcher Filter sind grafische Effekte möglich, wie sie aus professionellen Grafikprogrammen bekannt sind: Schatteneffekte für Texte oder auch Transparenzdefinitionen für Grafiken, die auf einer WWW-Seite angezeigt werden, gehören zum Repertoire der möglichen Angaben. Als reine CSS-Eigenschaften sind diese Filter statisch. Mit Hilfe von Scripts können Sie die entsprechenden Angaben zu den Filtern jedoch dynamisch beeinflussen. Ferner gibt es zwei Spezialfilter für Blend- und diverse Übergangseffekte. Mit etwas Programmier-Wissen und ästhetischem Gefühl können dabei so ziemlich alle Träume wahr werden, die Web-Designer heimlich immer schon geträumt haben: Grafiken, die sich wie von Geisterhand langsam ein- und ausblenden, fließende Übergänge zwischen Elementen, Texte, die verschwimmen usw.

Der Script-Zugriff auf definierte Filter erfolgt über das filter-Objekt in JScript/JavaScript. Die Beispiele hier können nicht alle Möglichkeiten des Filter-Objekts behandeln. Sie dienen nur zur Veranschaulichung, wie Filter sich durch ein Script dynamisch verändern lassen.

Die Filter-Technik von Microsoft ist jedoch nie ein Standard geworden, und es ist fraglich, ob sie je zum Standard gehören werden.

Einfaches Dynamisches Ändern von Filterwerten

Durch zeitgesteuertes Ändern der CSS-Filtereigenschaften können Sie interessante Effekte erzielen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<div id="Zittertext" style="width:100%; font-size:72pt; font-weight:bold; color:#FF6666;
filter:Wave(freq=5, light=0, phase=80, strength=1);">Leicht gest&ouml;rt</div>
<script language="JScript" type="text/jscript">
<!--
function DynWave() {
  if(document.all.Zittertext.filters[0].freq > 30)
     document.all.Zittertext.filters[0].freq = 5;
  document.all.Zittertext.filters[0].freq += 1;
  if(document.all.Zittertext.filters[0].phase > 100)
     document.all.Zittertext.filters[0].phase = 0;
  document.all.Zittertext.filters[0].phase += 10;
  if(document.all.Zittertext.filters[0].strength > 10)
     document.all.Zittertext.filters[0].strength = 1;
  document.all.Zittertext.filters[0].strength += 1;
  window.setTimeout("DynWave()",100);
}
DynWave();
//-->
</script>
</body>
</html>

Erläuterung:

Im Beispiel wird in einem <div>-Bereich der zugehörige Text (leicht gestört) mit Hilfe von CSS-Eigenschaften formatiert. Zu den Formatierungen gehört auch die Anwendung des Filters Wave(). Damit wird der Effekt des Filters zwar bereits angezeigt, aber es bewegt sich noch nichts. In einem Script unterhalb des so definierten <div>-Bereichs werden die Angaben dieses Filters dynamisch verändert. Da ein Endlos-Effekt mit immer neuen Werten und Kombinationen eingebaut ist, entsteht ein Zitter-Effekt.

Die JavaScript-Funktion wird im obigen Beispiel unterhalb des Bereichs, auf den sie sich bezieht, definiert. Der Grund ist, dass die JavaScript-Anweisungen sofort ausgeführt werden. Der <div>-Bereich, auf dessen Daten die Anweisungen dynamisch zugreifen, sollte zu diesem Zeitpunkt bereits eingelesen und dem Browser bekannt sein. Deshalb steht das Script unterhalb des <div>-Bereichs. Ansonsten könnte es zu Fehlermeldungen kommen.

Innerhalb des Script-Bereichs wird zunächst eine Funktion mit dem Namen DynWave() definiert. Diese Funktion ändert die Parameter freq, phase und strength des Wave-Filters, der bei dem <div>-Bereich definiert wurde. Am Ende ruft sich die Funktion selbst wieder auf. Dadurch entsteht ein Endlos-Effekt. Der Aufruf erfolgt zeitverzögert um 100 Millisekunden. Das ist wichtig, da der Selbstaufruf der Funktion sonst "unendlich schnell" wäre und ein Problem im Arbeitsspeicher verursachen würde (Selbstaufrufe von Funktionen sind nämlich nicht ganz unkritisch, da für jeden Funktionsaufruf neuer Arbeitsspeicherplatz reserviert werden muss).

Da die Funktion zu Beginn überhaupt erst einmal aufgerufen werden muss (sonst würde gar nichts passieren), steht am Ende des Script-Bereichs - außerhalb der Funktion DynWave() - der einmalige Funktionsaufruf DynWave();.

Innerhalb der Funktion im Beispiel können Sie erkennen, wie auf Filter dynamisch zugegriffen wird. Der Zugriff geschieht mit Hilfe des all-Objekts. Bezug ist die Angabe id="Zittertext", die im <div>-Tag vergeben wird. Mit document.all.Zittertext ist dann der Zugriff auf dieses HTML-Element möglich.

Zwei Besonderheiten sind bei Filtern jedoch zu beachten:
Mit einem Ausdruck wie document.all.Zittertext.filters[0].strength greifen Sie auf den Wert zu, der beim ersten definierten Filter des HTML-Elements bei der Angabe strength= als Parameter notiert ist. Da die Filter zu den Style-Sheet-Angaben gehören, müsste eigentlich document.all.Zittertext.style.filters[0].strength notiert werden. Dies führt beim MS Internet Explorer jedoch zu Fehlermeldungen. Lassen Sie die Angabe style in der Mitte also weg.
Da ein Element mehrere Filter haben kann, müssen Sie genau angeben, welchen Filter Sie dynamisch ansprechen wollen. Im obigen Beispiel wird mit filters[0] der erste definierte Filter angesprochen. Falls im gleichen <div>-Tag noch einen zweiter Filter definiert wäre, könnten Sie diesen mit filters[1] ansprechen. Also einfach bei 0 zu zählen beginnen. Microsoft erlaubt auch weitere Notationsmöglichkeiten, für das obige Beispiel etwa document.all.Zittertext.filters["wave"].strength oder document.all.Zittertext.filters.wave.strength.

Das hier beschriebene Schema zum Zugreifen auf Filterwerte können Sie auf alle anderen Filter ebenso anwenden. Auch auf solche, die vor allem in Verbindung mit Grafiken sinnvoll sind.

Fließende Übergänge mit dem blendTrans-Filter

Der blendTrans-Filter ist ein spezieller Filter, der nur in Verbindung mit Scripts sinnvoll ist. Er erlaubt es, einen fließenden Übergang von einer Grafik zu einer anderen Grafik oder von einem Textinhalt zu einem anderen Textinhalt zu definieren. Dadurch werden Effekte wie bei professionellen Dia-Shows oder wie bei Fernsehbildern auf WWW-Seiten möglich.

Beispiel für Grafiken:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
Bild1 = new Image();
Bild1.src = "madrid1.jpg";
Bild2 = new Image();
Bild2.src = "madrid2.jpg";
var Bild = 1;
function Bildwechsel() {
 if (Bild == 1) {
  Bild = 2;
  document.all.Madrid.filters.blendTrans.Apply();
  document.all.Madrid.src = Bild2.src;
  document.all.Madrid.filters.blendTrans.Play();
 }
 else {
  Bild = 1;
  document.all.Madrid.filters.blendTrans.Apply();
  document.all.Madrid.src = Bild1.src;
  document.all.Madrid.filters.blendTrans.Play();
 }
}
//-->
</script>
</head><body>
<p>Klicken Sie auf das Bild, nachdem es vollständig angezeigt ist.</p>
<img id="Madrid" src="madrid1.jpg" style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onClick="Bildwechsel()" width="433" height="278" border="0" alt="Das ist Madrid">
</body>
</html>

Erläuterung:

Das Beispiel bewirkt, dass beim Klicken auf ein Bild dieses Bild langsam in ein anderes übergeht. Wird das andere Bild dann angeklickt, geht es langsam wieder in das erste über.

Dazu wird zunächst bei der Definition des Bildes mit <img...> eine spezielle Style-Sheet-Angabe notiert: der Filter blendTrans(...). Dieser Filter erwartet einen Parameter, nämlich die Angabe zu Duration=. Damit können Sie angeben, wie lange der Übergang von dem Bild zu seinem Nachfolger dauern soll. Im Beispiel wird 4 angegeben - das steht für 4 Sekunden. Sie können auch Bruchwerte bis zu tausendstel Sekunden angeben, etwa 2.450 (Dezimalzeichen ist ein Punkt!).

Damit ist der Übergangseffekt jedoch nur "registriert". Um ihn tatsächlich auszuführen, ist ein Script erforderlich. Im obigen Beispiel wird im Dateikopf ein JavaScript-Bereich definiert. Dort werden zunächst mit Hilfe des Bildobjekts image beide betroffenen Bilder als Objekte (Bild1 und Bild2) definiert. Der Eigenschaft src der Bildobjekte werden die gewünschten Grafikdateien zugewiesen. Diese Vorarbeit mit dem image-Objekt ist zwar nicht zwingend notwendig, hat aber den Vorteil, dass alle betroffenen Bilder bereits in den Arbeitsspeicher geladen sind, wenn der Übergang angestoßen wird.

Innerhalb der Funktion Bildwechsel() findet dann der eigentliche Übergang statt. Diese Funktion wird aufgerufen, wenn der Anwender auf das Bild klickt. Dazu ist im <img>-Tag der Event-Handler onClick= notiert.

In der Funktion Bildwechsel() wird zunächst die Methode Apply() des blendTrans-Filters aufgerufen. Dieser Aufruf ist notwendig, um dasjenige Objekt zu identifizieren, das in ein anderes übergehen soll. Im Beispiel ist das die Grafik, angesprochen über das all-Objekt und den vergebenen id-Namen DynBild. Als nächster Befehl wird der Grafik diejenige neue Grafik zugeordnet, durch die sie ersetzt werden soll. Erst dann sind alle Voraussetzungen erfüllt, um den eigentlichen Übergang zu starten. Dazu wird die Methode Play() des filter-Objekts benutzt.

Die Variable Bild und der else-Zweig in der Beispielfunktion dienen dazu, den Wechseleffekt sicherzustellen. Mit den beschriebenen Befehlen findet der Übergang ansonsten genau einmal statt.

Der Übergangs-Effekt ist nicht nur bei Grafiken möglich, sondern auch bei Text.

Beispiel für Text:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
var NormalText = "Wer HTML nicht ehrt";
var AndererText = "ist des Dynamischen nicht wert";
var Text = 1;
function Wechsel() {
 if (Text == 1) {
  Text = 2;
  document.all.MeinText.filters.blendTrans.Apply();
  document.all.MeinText.innerText = AndererText;
  document.all.MeinText.filters.blendTrans.Play();
 }
 else {
  Text = 1;
  document.all.MeinText.filters.blendTrans.Apply();
  document.all.MeinText.innerText = NormalText;
  document.all.MeinText.filters.blendTrans.Play();
 }
}
//-->
</script>
</head><body>
<p>Klicken Sie auf den folgenden Text:</p>

<div id="MeinText" style="cursor:hand; font-size:32pt; color:red; width:600; height:200; filter:blendTrans(Duration=0.5)" onClick="Wechsel()">
Wer HTML nicht ehrt</div>
</body>
</html>

Erläuterung:

Anwendbar ist der blendTrans-Filter bei Text auf die HTML-Elemente:
<body>...</body>
<div>...</div>
<span>...</span>
<input>
<button>
<textarea>...</textarea>
<marquee>...</marquee>
sowie auf alle Tabellenelemente. Bei <div>...</div> und bei <span>...</span> müssen Sie Style-Sheet-Angaben zu Breite und/oder Höhe des Elements notieren, sonst funktioniert es nicht.

Das obige Beispiel ist im wesentlichen das gleiche wie bei den Grafiken. Im Unterschied dazu wird jedoch ein Übergang zwischen zwei Texten definiert. Der erste Text ist im Dateikörper der HTML-Datei mit <div>...</div> entsprechend der Regeln definiert. Die Realisierung des Übergangs zwischen den beiden Texten ist ähnlich wie bei Grafiken. Anstelle der Objekteigenschaft src (bei Grafiken) müssen Sie bei Texten jedoch die Eigenschaft innerText (wie im Beispiel) oder innerHTML verwenden. Diese Eigenschaften erlauben das dynamische Austauschen des Inhalts, den das angesprochene HTML-Element enthält.

Fließende Übergänge mit dem revealTrans-Filter

Der revealTrans-Filter ist ganz ähnlich zu handhaben wie der revealTrans-Filter. Während der blendTrans-Filter jedoch nur einfache Blenden von einem Inhalt zum anderen erlaubt, stellt der revealTrans-Filter ein ganzes Arsenal grafischer Überblend-Effekte bereit.

Beispiel (für Grafik):

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img id="DynBild" src="rain.gif"
style="filter:revealTrans(Duration=2,Transition=12)" width="150"
   height="145" alt="Sonnenschein?">
<script language="JScript" type="text/jscript">
<!--
 window.setTimeout("Wechsel()",5000);
 function Wechsel()
 {
  document.all.DynBild.filters.revealTrans.Apply();
  document.all.DynBild.src = "sun.gif";
  document.all.DynBild.filters.revealTrans.Play();
 }
//-->
</script>
</body></html>

Das Beispiel bewirkt, dass innerhalb von 5 Sekunden (5000 Millisekunden) das angezeigte Bild "rain.gif" zerbröselt und durch das Bild "sun.gif" ersetzt wird.

Beispiel (für Text):

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<div id="MeinText" style="width:600px; height:100px; font-size:24pt; filter:revealTrans(Duration=1,Transition=7)">
Wer HTML nicht ehrt
</div>
<script language="JScript" type="text/jscript">
<!--
 window.setTimeout("Wechsel()",2500);
 function Wechsel()
 {
  document.all.MeinText.filters.revealTrans.Apply();
  document.all.MeinText.innerText = "ist des Dynamischen nicht wert";
  document.all.MeinText.filters.revealTrans.Play();
 }
//-->
</script>
</body></html>

Erläuterung:

Das Beispiel bewirkt, dass der Text Wer HTML nicht ehrt nach 2,5 Sekunden durch den Text ist des Dynamischen nicht wert ersetzt wird, und zwar so, dass der neue Text den zunächst angezeigten Text von rechts her "überrollt".

Dazu wird zunächst der Text Wer HTML nicht ehrt innerhalb eines <div>-Bereichs notiert. Denn der revealTrans-Filter ist im Zusammenhang mit Text auf die folgenden HTML-Elemente anwendbar:
<body>...</body>
<div>...</div>
<span>...</span>
<input>
<button>
<textarea>...</textarea>
<marquee>...</marquee>
sowie auf alle Tabellenelemente. Bei <div>...</div> und bei <span>...</span> müssen Sie Style-Sheet-Angaben zu Breite und/oder Höhe des Elements notieren, sonst funktioniert es nicht. Im obigen Beispiel werden Breite und Höhe des <div>-Bereichs mit width: und height: festgelegt.

Ferner wird eine spezielle Style-Sheet-Angabe notiert: der Filter revealTrans(...). Dieser Filter erwartet zwei Parameter, nämlich die Angabe zu Duration= und eine Angabe zu Transition=. Mit Duration= können Sie angeben, wie lange der Übergang von dem Text zu seinem Nachfolger dauern soll. Im Beispiel wird 1 angegeben - das steht für eine Sekunde. Sie können auch Bruchwerte bis zu tausendstel Sekunden angeben, etwa 2.450 (Dezimalzeichen ist ein Punkt!).

Bei Transition= geben Sie die Art an, wie der Filter wirken soll.

Mögliche Werte beim revealTrans-Filter:

Anzeigebeispiel: So sieht's aus (alle 24 Möglichkeiten für Text und Grafik)

Notation	Bedeutung	Notation	Bedeutung	Notation	Bedeutung
`Transition=0`	Box-Effekt außen nach innen	`Transition=8`	Streifen-Effekt von links nach rechts	`Transition=16`	Aufklapp-Effekt nach oben und unten
`Transition=1`	Box-Effekt innen nach außen	`Transition=9`	Streifen-Effekt von oben nach unten	`Transition=17`	Aufroll-Effekt von rechts oben nach links unten
`Transition=2`	Kreis-Effekt von außen nach innen	`Transition=10`	Rechteck-Effekt von links nach rechts	`Transition=18`	Aufroll-Effekt von rechts unten nach links oben
`Transition=3`	Kreis-Effekt von innen nach außen	`Transition=11`	Rechteck-Effekt von oben nach unten	`Transition=19`	Aufroll-Effekt von links oben nach rechts unten
`Transition=4`	Aufroll-Effekt von unten nach oben	`Transition=12`	Zerbröselungseffekt in alle Richtungen	`Transition=20`	Aufroll-Effekt von links unten nach rechts oben
`Transition=5`	Aufroll-Effekt von oben nach unten	`Transition=13`	Aufroll-Effekt beidseitig von außen nach innen	`Transition=21`	Jalousie-Effekt waagerecht
`Transition=6`	Aufroll-Effekt von links nach rechts	`Transition=14`	Aufroll-Effekt beidseitig von innen nach außen	`Transition=22`	Jalousie-Effekt senkrecht
`Transition=7`	Aufroll-Effekt von rechts nach links	`Transition=15`	Zuklapp-Effekt von oben und unten	`Transition=23`	Zufallseffekt aus Effekten 0-22

Ein-/Ausblend-Effekte

Sie können die beiden Filter blendTrans und revealTrans auch dazu nutzen, um Texte oder Grafiken "aus dem Nichts heraus" einzublenden oder auszublenden. Dies ist in Verbindung mit der Style-Sheet-Angabe zur Anzeige bzw. Nichtanzeige mit Platzhalter - (visibility) möglich.

Beispiel für Text:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<div id="KommText" style="width:400px; height:100px; font-size:24pt; font-weight:bold; color:#0000FF; visibility:hidden; filter:blendTrans(Duration=4)">
Hier kommt der Text
</div>
<script language="JScript" type="text/jscript">
<!--
  document.all.KommText.filters.blendTrans.Apply();
  document.all.KommText.style.visibility = "visible";
  document.all.KommText.filters.blendTrans.Play();
//-->
</script>

<div id="GehText" style="width:400px; height:100px; font-size:24pt; font-weight:bold; color:#0000FF;
visibility:visible; filter:blendTrans(Duration=4)">
Hier geht der Text
</div>
<script language="JScript" type="text/jscript">
<!--
  document.all.GehText.filters.blendTrans.Apply();
  document.all.GehText.style.visibility = "hidden";
  document.all.GehText.filters.blendTrans.Play();
//-->
</script>
</body></html>

Erläuterung:

Im obigen Beispiel werden insgesamt zwei <div>-Bereiche mit Text definiert. Beide Bereiche erhalten mit der id-Angabe jeweils einen Namen, damit sie per Script ansprechbar sind. Der eine Bereich erhält den Namen KommText, der andere den Namen GehText. Beide Bereiche erhalten auch mit Hilfe der Style-Sheet-Angabe visibility eine Angabe dazu, ob sie zunächst angezeigt werden sollen oder nicht. Die Angabe visibility:hidden im ersten der beiden <div>-Bereiche sorgt dafür, dass dieser Bereich zunächst nicht angezeigt wird. Im zweiten Bereich steht dagegen die Angabe visibility:visible. Dadurch wird der entsprechende Text zunächst angezeigt. In beiden <div>-Bereichen wird außerdem der blendTrans-Filter notiert.

Unterhalb jedes der beiden <div>-Bereiche ist ein Script notiert, das den jeweiligen blendTrans-Filter ausführt. Das funktioniert genauso wie bei fließenden Übergängen mit dem blendTrans-Filter. Der Unterschied ist lediglich, dass dem jeweiligen <div>-Bereich zwischen dem Aufruf der Methoden Apply() und Play() kein anderer Text zugewiesen wird, sondern ein neuer Wert für visibility. Der Bereich, der zunächst visibility:hidden zugewiesen bekam, wird innerhalb des Scripts mit der Anweisung document.all.KommText.style.visibility = "visible" sichtbar. Da der Wechsel zwischen unsichtbar und sichtbar jedoch in den blendTrans-Filter eingebunden ist, wird der Text nicht sofort sichtbar, sondern erst durch das Ausführen des blendTrans-Filters.
Mit dem zweiten Text passiert das gleiche, nur umgekehrt.

Beispiel für Grafik:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p><a id="ein" style="display:inline" href="javascript:Einblenden()">Grafik einblenden</a><br>
<a id="aus" style="display:none" href="javascript:Ausblenden()">Grafik ausblenden</a></p>
<img id="Bild" src="madrid1.jpg" style="visibility:hidden; filter:revealTrans(Duration=4, Transition=1)" width="433" height="278" alt="Madrid">
<script language="JScript" type="text/jscript">
<!--
  function Einblenden()
  {
   document.all.Bild.filters.revealTrans.Transition = 1;
   document.all.Bild.filters.revealTrans.Apply();
   document.all.Bild.style.visibility = "visible";
   document.all.Bild.filters.revealTrans.Play();
   document.all.ein.style.display = "none";
   document.all.aus.style.display = "inline";
  }
  function Ausblenden()
  {
   document.all.Bild.filters.revealTrans.Transition = 0;
   document.all.Bild.filters.revealTrans.Apply();
   document.all.Bild.style.visibility = "hidden";
   document.all.Bild.filters.revealTrans.Play();
   document.all.ein.style.display = "inline";
   document.all.aus.style.display = "none";
  }
//-->
</script>
</body></html>

Erläuterung:

Das voranstehende Beispiel enthält zunächst zwei Verweise. Die beiden Verweise rufen JavaScript-Funktionen auf. Einer der Verweise ruft die Funktion Einblenden() zum Einblenden einer Grafik auf, der andere die Funktion Ausblenden() zum Ausblenden derselben Grafik. Beide Verweise enthalten auch Style-Sheet-Angaben zur Anzeige bzw. Nichtanzeige ohne Platzhalter - (display). Der erste Verweis wird zunächst angezeigt, der zweite nicht. Die Angaben werden in den beiden Script-Funktionen Einblenden() und Ausblenden() dynamisch verändert. So wird ermöglicht, dass der Verweis Grafik einblenden angezeigt wird, wenn die Grafik nicht angezeigt wird, und der Verweis Grafik ausblenden, wenn die Grafik angezeigt wird.

Unterhalb der Verweise wird die Grafik notiert, die ein- und ausblendbar sein soll. Durch Style-Sheet-Angabe visibility:hidden wird die Anzeige der Grafik zunächst verhindert. Außerdem erhält die Grafik eine Angabe zum revealTrans-Filter. Wenn der Anwender nun auf den zunächst angezeigten Verweis Grafik einblenden klickt, wird die Script-Funktion Einblenden() aufgerufen. Diese Funktion ändert zwischen dem Aufruf von Apply() und Play() des revealTrans()-Filters die Anzeige der einzublendenden Grafik auf visible. Der Filter wird ausgeführt, und die Grafik wird in der vorgeschriebenen Form (transition = 1) eingeblendet. Ferner tauscht die Funktion Einblenden() noch die Anzeige-Attribute der beiden Verweise aus, so dass nun der Verweis zum Ausblenden der Grafik angezeigt wird.

Die Funktion Ausblenden() leistet das Gleiche, nur umgekehrt. Dabei wird auch die Art des revealTrans-Filters umgekehrt, und zwar durch transition = 0.

Fließende Seitenübergänge

Als besonderes Bonbon hat sich Microsoft schließlich noch einfallen lassen, die beiden Filter blendTrans und revealTrans im Zusammenhang mit Meta-Angaben zu interpretieren. Auf diese Weise werden fließende Übergänge zwischen zwei Web-Seiten möglich.

Beispiel - Datei `uebergang1.htm`:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=12)">
</head><body bgcolor="#000000" text="#FFFFFF" link="#FFFF66" vlink="#FFFF66" alink="#FFFFFF">
<h1>Hier ist Seite 1</h1>
<p><img src="madrid1.jpg" width="433" height="278" border="0" alt="ein Bild"></p>
<p><a href="uebergang2.htm">und ein Link zu Seite 2</a></p>
</body></html>

Beispiel - Datei `uebergang2.htm`:

<html><head><title>Test</title>
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=3,Transition=12)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=12)">
</head><body bgcolor="#000000" text="#FFFFFF" link="#FFFF66" vlink="#FFFF66" alink="#FFFFFF">
<h1>Und das hier ist Seite 2</h1>
<p>Sie sieht ein klein wenig anders aus, aber nicht viel.</p>
<p><img src="madrid2.jpg" width="433" height="278" border="0" alt="ein Bild"></p>
<p><a href="uebergang1.htm">und das ist ein Link, der wieder zu Seite 1 geht</a></p>
</body></html>

Erläuterung:

Mit <meta http-equiv="Page-Exit"... bestimmen Sie einen Filter, der beim Verlassen der Seite angewendet wird, und mit <meta http-equiv="Page-Enter"... einen Filter, der beim Laden der Seite angewendet wird. Bei content= notieren Sie RevealTrans oder BlendTrans und dahinter in Klammern die gewünschten Angaben zu zu Duration= und - beim RevealTrans-Filter - Transition=. Im obigen Beispiel wird für alle Fälle in beiden Dateien der RevealTrans-Filter mit Transition=12 eingesetzt.

Beachten Sie:

Im MS Internet Explorer 5.0 war das obige Beispiel nicht nachvollziehbar.


	Allgemeine DHTML-Bibliothek
	Datenanbindung (nur Microsoft)

SELFHTML/Navigationshilfen

Dynamisches HTML

DHTML-Modelle

Dynamische Filter (nur Microsoft)

Allgemeines zu dynamischen Filtern

Einfaches Dynamisches Ändern von Filterwerten

Beispiel:

Erläuterung:

Fließende Übergänge mit dem blendTrans-Filter

Beispiel für Grafiken:

Erläuterung:

Beispiel für Text:

Erläuterung:

Fließende Übergänge mit dem revealTrans-Filter

Beispiel (für Grafik):

Beispiel (für Text):

Erläuterung:

Mögliche Werte beim revealTrans-Filter:

Ein-/Ausblend-Effekte

Beispiel für Text:

Erläuterung:

Beispiel für Grafik:

Erläuterung:

Fließende Seitenübergänge

Beispiel - Datei uebergang1.htm:

Beispiel - Datei uebergang2.htm:

Erläuterung:

Beachten Sie:

Beispiel - Datei `uebergang1.htm`:

Beispiel - Datei `uebergang2.htm`: