SELFHTML: Dynamisches HTML / DHTML-Modelle / Dynamische Filter (nur Microsoft)
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie fließende Bild-, Text- und Seitenübergänge mit dem Internet Explorer ab 4.x realisieren können.
Keywords: SELFHTML, Dynamisches HTML, Dynamic HTML, DHTML, Microsoft, Internet Explorer, Filter, dynamische Filter
Date: 2005-10-28T20:44:22+02:00

| # 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 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:96px; 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&ouml;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 Stylesheet-Angaben gehören, müsste eigentlich `document.all.Zittertext.style.filters[0].strength` notiert werden. Dies führt beim 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 Stylesheet-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; margin-bottom:100px; font-size:2.6em; color:red; width:14em; 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 Stylesheet-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 blendTrans-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:14em; height:150px; font-size:2em; 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 Stylesheet-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 Stylesheet-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-/Ausblendeffekte

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 Stylesheet-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:10em; height:3em; font-size:2em; 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:10em; height:3em; font-size:2em; 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 Stylesheet-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 Stylesheet-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 Stylesheet-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, sodass 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>
    <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>
    <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 Internet Explorer 5.0 war das obige Beispiel nicht nachvollziehbar.

| Allgemeine DHTML-Bibliothek
| Datenanbindung (nur Microsoft)

© 2007 Impressum