Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Dynamische Filter (nur Microsoft)

Informationsseite

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

 nach unten 

MS JScriptMS IE 4.0 Allgemeines zu dynamischen Filtern

Der Internet Explorer unterstützt ab der Version 4.x spezielle CSS-Eigenschaften, die so genannten Seite 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.

nach obennach unten

MS JScriptMS IE 4.0 Einfaches Dynamisches Ändern von Filterwerten

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

Beispiel:

Beispiel-Seite 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 Kapitel CSS-Eigenschaften formatiert. Zu den Formatierungen gehört auch die Anwendung des Seite 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 Seite 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 Seite 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.

nach obennach unten

MS JScriptMS IE 4.0 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:

Beispiel-Seite 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 Seite 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:

Beispiel-Seite 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.

nach obennach unten

MS JScriptMS IE 4.0 Fließende Übergänge mit dem revealTrans-Filter

Der revealTrans-Filter ist ganz ähnlich zu handhaben wie der nach oben 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):

Beispiel-Seite 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):

Beispiel-Seite 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:

Beispiel-Seite 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

 

nach obennach unten

MS JScriptMS IE 4.0 Ein-/Ausblendeffekte

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

Beispiel für Text:

Beispiel-Seite 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 nach oben 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:

Beispiel-Seite 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 Seite 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 nach oben 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.

nach obennach unten

MS IE 5.0 Fließende Seitenübergänge

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

Beispiel - Datei uebergang1.htm:

Beispiel-Seite 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.

 nach oben
weiter Seite Allgemeine DHTML-Bibliothek
zurück Seite Datenanbindung (nur Microsoft)
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/dhtml/modelle/dynamische_filter.htm