SELFHTML: Dynamisches HTML / Ansätze / Dynamische Filter (Microsoft)

SELFHTML/Quickbar Dynamisches HTML Die Ansätze von Microsoft und Netscape

	Dynamische Filter (Microsoft)
	Dynamische Filter Einfaches Dynamisches Ändern von Filterwerten Fließende Übergänge mit dem blendTrans-Filter Fließende Übergänge mit dem revealTrans-Filter Ein-/Ausblendeffekte

Dynamische Filter

Der MS Internet Explorer unterstützt ab der Version 4.x spezielle Style-Sheet-Angaben, die sogenannten 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 Style-Sheet-Angaben sind diese Filter statisch. Mit Hilfe von Scripts können Sie die Angaben zu den Filtern 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.

Einfaches Dynamisches Ändern von Filterwerten

Anzeigebeispiel: So sieht's aus

Wie alle übrigen Style-Sheet-Angaben, so können Sie auch Angaben zu Filtern dynamisch ändern.

Beispiel:

<html>
<head>
</head>
<body>
<div id="Zittertext" style="width:100%; font-size:72pt; color:#FF6666;
filter:Wave(freq=5, light=20, phase=50, strength=6);">leicht gest&ouml;rt</div>
<script language="JavaScript">
<!--
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 Style-Sheet-Angaben 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, daß 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 muß).

Da die Funktion zu Beginn überhaupt erst einmal aufgerufen werden muß (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üßte 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

Anzeigebeispiel: So sieht's aus (bei Grafiken)
Anzeigebeispiel: So sieht's aus (bei Text)

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

<html>
<head>
<script language="JavaScript">
<!--
Bild1 = new Image(); 
Bild1.src = "bild1.jpg";
Bild2 = new Image(); 
Bild2.src = "bild2.jpg";
var Bild = 1;
function Bildwechsel()
{
 if(Bild == 1)
 {
  Bild = 2;
  document.all.DynBild.filters.blendTrans.Apply();
  document.all.DynBild.src = Bild2.src;
  document.all.DynBild.filters.blendTrans.Play();
 }
 else
 {
  Bild = 1;
  document.all.DynBild.filters.blendTrans.Apply();
  document.all.DynBild.src = Bild1.src;
  document.all.DynBild.filters.blendTrans.Play();
 }
}
//-->
</script>
</head>
<body>
<img id="DynBild" src="bild1.jpg" style="cursor:hand; filter:blendTrans(Duration=4)"
onClick="Bildwechsel()" width=200 height=100">
</body>
</html>

Erläuterung:

Das Beispiel bewirkt, daß 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, daß 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):

<html>
<head>
<script language="JavaScript">
<!--
var Text = 1;
function Textwechsel()
{
 if(Text == 1)
 {
  Text = 2;
  document.all.MeinText.filters.blendTrans.Apply();
  document.all.MeinText.innerText = "ist des Dynamischen nicht wert";
  document.all.MeinText.filters.blendTrans.Play();
 }
 else
 {
  Text = 1;
  document.all.MeinText.filters.blendTrans.Apply();
  document.all.MeinText.innerText = "Wer HTML nicht ehrt";
  document.all.MeinText.filters.blendTrans.Play();
 }
}
//-->
</script>
</head>
<body>
<div id="MeinText" style="cursor:hand; width:400px; height:100px;
font-size:24pt; filter:blendTrans(Duration=0.5)" 
onClick="Textwechsel()">
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

Anzeigebeispiel: So sieht's aus

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 Text):

<html>
<head>
</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="JavaScript">
<!--
 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, daß der Text Wer HTML nicht ehrt nach 2,5 Sekunden durch den Text ist des Dynamischen nicht wert ersetzt wird, und zwar so, daß 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 0.5 angegeben - das steht für eine halbe 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. Die folgende Tabelle schlüsselt die erlaubten Werte auf - systematische Beispiele zur Wirkung der einzelnen Filter finden Sie im Anzeigebeispiel:

`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`	Joker (Zufalls-Effekt)

Der revealTrans-Filter läßt sich ebenso für Grafiken verwenden:

Beispiel (für Grafik):

<html>
<head>
</head>
<body>
<img id="DynBild" src="regen.gif"
style="filter:revealTrans(Duration=4,Transition=12)" width=320 height=240>
<script language="JavaScript">
<!--
 window.setTimeout("Wechsel()",5000);
 function Wechsel()
 {
  document.all.DynBild.filters.revealTrans.Apply();
  document.all.DynBild.src = "sonne.gif";
  document.all.DynBild.filters.revealTrans.Play();
 }
//-->
</script>
</body>
</html>

Erläuterung:

Das Beispiel bewirkt, daß innerhalb von 5 Sekunden (5000 Millisekunden) das angezeigte Bild "regen.gif" zerbröselt und durch das Bild "sonne.gif" ersetzt wird. Dabei gelten die gleichen Regeln wie bei Text. Nur daß bei Grafiken zwischen Apply() und Play() die gewünschte neue Grafik zugewiesen werden muß, und zwar der Eigenschaft src.

Ein-/Ausblendeffekte

Anzeigebeispiel: So sieht's aus (Text)
Anzeigebeispiel: So sieht's aus (Grafik)

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 (Text ein-/ausblenden):

<html>
<head>
</head>
<body>
<div id="KommText" style="width:400px; height:100px; font-size:24pt; 
font-weight:bold; color:#0000FF; visibility:hidden; filter:blendTrans(Duration=10)">
Hier kommt der Text
</div>
<script language="JavaScript">
<!--
  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=10)">
Hier geht der Text
</div>
<script language="JavaScript">
<!--
  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, daß 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, daß 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 (Grafik ein-/ausblenden):

<html>
<head>
</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="grafik.jpg" style="visibility:hidden;
filter:revealTrans(Duration=4, Transition=1)" width=433 height=278>
<script language="JavaScript">
<!--
  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, daß 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 daß 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.


weiter:	JSSS JavaScript Style Sheets (Netscape)
zurück:	Datenanbindung (Microsoft)

SELFHTML/Quickbar Dynamisches HTML Die Ansätze von Microsoft und Netscape