Überblendungen

SELFHTML aktuell Artikel JavaScript Fader-Framework
	Überblendungen
	Überblendungen CSS3-Eigenschaft opacity Überblenden mit JavaScript: Ein einfacher Fader

Überblendungen

Beim Überblenden passiert im Grunde nichts anderes, als dass man bei zwei übereinander liegenden Bildern zuerst das untere mit voller Deckkraft darstellt, und das zweite völlig transparent deckungsgleich darüber. In der Animation erhöht man nun schrittweise die Deckkraft des zweiten Bildes, sodass es das darunterliegende Bild immer mehr überdeckt. Dazu bedient man sich der CSS-Eigenschaft opacity, zu der nun ein kurzer Exkurs folgt.

CSS3-Eigenschaft `opacity`

Die CSS-Eigenschaft opacity ist Bestandteil des zukünftigen englischsprachige Seite Farben-Moduls von CSS 3. Auch wenn SELFHTML in seiner Version 8.1.2 vom 01.03.2007 die Eigenschaft nicht aufführt, so wird sie doch zum Zeitpunkt der Entstehung dieses Artikels (August 2008) in allen wesentlichen Browsern bereits hinreichend unterstützt. Für den Internet Explorer muss man allerdings ein wenig anders vorgehen, dazu später mehr.

Die CSS-Eigenschaft opacity steuert die "Deckkraft" (Opazität) eines Elements. Je höher der Wert, desto weniger durchsichtig ist ein Element. Dabei darf der Wert für opacity Dezimalwerte zwischen 0.0 und 1.0 annehmen, stellt also den Prozentwert dar (20% Transparenz entsprächen dann 80% Deckkraft, also opacity:0.8).

Beispiel mit `opacity`:

Dieses Bild wird ohne expliziten opacity-Wert dargestellt, es gilt die Voreinstellung mit opacity:1.0.
Dieses Bild wird mit opacity:0.6 dargestellt.
Dieses Bild wird mit opacity:0.3 dargestellt.

Das zweite Bild wurde so notiert:

<img src="images/berge2.jpg" alt="in den Bergen" style="opacity:0.6; filter:alpha(opacity=60)';">

Erläuterung:

Über das style-Attribut werden dem zweiten und dritten Bild-Element die Eigenschaft opacity mit dem Wert 0.6 bzw. 0.3 verliehen.

Beachten Sie:

Da zum gegenwärtigen Zeitpunkt opacity "nur" in einem sogenannten "Working Draft" notiert ist, ist es noch kein offizieller Bestandteil des Standards. Das kann dazu führen, dass Validatoren (also Mechanismen, die Code auf seine formale Richtigkeit hin prüfen) hier eventuell Fehlermeldungen ausgeben. Der Validator des W3-Consortiums bietet freundlicherweise an, gegen die Spezifikationen von CSS3 zu validieren.

Für den Internet Explorer ist eine andere Notation erforderlich. Er unterstützt die opacity-Eigenschaft noch nicht, eine gleichwertige Umsetzung ist allerdings mittels seiner Filter-Methoden möglich. Daher notieren Sie als "CSS-Eigenschaft" filter:alpha(opacity=...), wobei hier nicht der Prozentwert, sondern die Prozentpunkte notiert werden müssen, sprich Werte zwischen 0 und 100. Für opacity: 0.6 notieren Sie hier filter:alpha(opacity=60).

Beachten Sie unbedingt, dass filter eine reine Microsoft-Syntax für ausschließlich den Internet Explorer ist. Sollte Microsoft einmal den CSS3-Standard in seinen Internet Explorer implementieren, dann werden solche "Workarounds" immer mehr der Vergangenheit angehören.

Überblenden mit JavaScript: Ein einfacher Fader

Ein Überblenden mit JavaScript bedeutet also nichts anderes, als den opacity-Wert mittels eines Timeouts zu verändern, und dabei dem einzublendenden Bild immer größere opacity-Werte zuzuweisen, damit es das vorherige Bild immer mehr überdeckt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Einfacher Fader</title>
    <script type="text/javascript">
        function fade(step) {
            var imgs = document.getElementsByTagName("img");

            step = step || 0;

            imgs[1].style.opacity = step/100;
            imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE

            step = step + 2;

            if (step <= 100) {
                window.setTimeout(function () { fade(step); }, 1);
            }
        }
    </script>
</head><body>
    <h1>Einfacher Fader</h1>
    <p style="position:relative;">
        <img src="images/berge1.jpg" alt="">
        <img src="images/berge2.jpg" alt=""
            style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0)">
    </p>
    <p><a href="javascript:fade()">überblenden</a></p>
</body></html>

Erläuterung:

Damit das zweite Bild genau über dem ersten zu liegen kommt, muss es absolut positioniert werden. Damit sein Bezugspunkt aber nicht die linke obere Ecke des Browserfensters, sondern das vorherige Bild wird, wurde das direkte Elternelement der Bilder (hier der Textabsatz) relativ positioniert. Dadurch ändert sich die "Nullmarke" für absolut positionierte Kindelemente (in diesem Fall die <img>-Elemente). Nun kann das zweite Bild mittels top:0 und left:0 passgenau über das vorherige gelegt werden, was für das Überblenden unverzichtbar ist.

Die Funktion fade bekommt einen Parameter übergeben, der im weiteren Verlauf als gegenwärtiger Prozentwert für die Überblendung benutzt wird. Wird kein Wert übergeben, wird der Wert 0.0 angenommen. Das wird dadurch erreicht, indem die Variable step mit dem Wert Null in einer Oder-Verknüpfung verglichen wird. Ist kein Wert für step übermittelt worden, dann wird der zweite Parameter dieser Verknüpfung als Wert angenommen.

Mit getElementsByTagName ermittelt die Funktion alle Bilder des Dokuments, um dann dem zweiten Bild (mit dem Index 1, denn die Zählung beginnt immer bei Null!) den passenden opacity-Wert zuzuweisen. Wie bereits besprochen muss das ein Prozentwert sein, daher wird der aktuelle Prozentschritt in der Variablen step durch 100 geteilt. Für den Internet Explorer wird der entsprechende Filterwert vergeben, welcher dem aktuellen Wert in step entspricht.

Beim Aufruf von window.setTimeout wird eine anonyme Funktion definiert, in der die Funktion fade mit dem Parameter step aufgerufen wird, welcher den aktuell erreichten Prozentschritt enthält. Diese Notation ist notwendig, da setTimeout eine Referenz auf eine Funktion benötigt, welcher direkt kein Parameter mitgegeben werden kann. Stünde an der Stelle lediglich window.setTimeout(fade, 1), dann würde kein Prozentschritt an fade übergeben, was regelmäßig als Prozentschritt von 0.0 interpretiert werden würde - ein Endloskreislauf. Indem der Aufruf mit Parameter hier aber in einer anonymen Funktion gekapselt wird, kann setTimeout über diese Funktion an fade einen Parameter übertragen.

Beachten Sie:

Dass eine Parameterübergabe in der anonymen Funktion überhaupt gelingt, liegt daran, dass hier Funktionen ineinander verschachtelt werden. Die innere, anonyme Funktion hat dabei Zugriff auf die lokalen Variablen der äußeren Funktion, das ist fade. (Auf die Funktion fade selbst hat sie ohnehin Zugriff, denn diese ist eine globale Funktion.) Bei der anonymen Funktion handelt es sich um eine sogenannte Closure, die die Variable step einschließt. Wenn window.setTimeout diese Funktion aufruft, ist die Variable step mitsamt ihrem Werte immer vorhanden - ein Umstand, der gerade für Anfänger nicht leicht zu begreifen ist.

Für die zuvor besprochene Microsoft-Syntax wurde hier das Äquivalent in JavaScript notiert: <Objekt>.style.filter = "alpha(opacity=...)";. Damit wird dem Elementobjekt der filter-Wert in seinem style-Objekt zugewiesen, egal ob es sich bei dem verwendeten Browser um den Internet Explorer handelt, oder nicht. Sollte der verwendete Browser nicht der Internet Explorer sein, dann wird im style-Objekt diese Eigenschaft einfach angelegt - und ignoriert. Nur vom Internet Explorer wird sie entsprechend umgesetzt, sodass hier eine explizite Prüfung auf das Vorhandensein einer filter-Eigenschaft im style-Objekt nicht notwendig ist. Man kann sie einfach vergeben, ohne dass es im Script zu einem Abbruch wegen einer Fehlermeldung kommt.

Bilderslideshow

Animieren in JavaScript

Überblendungen

Überblendungen

CSS3-Eigenschaft opacity

Beispiel mit opacity:

Erläuterung:

Beachten Sie:

Überblenden mit JavaScript: Ein einfacher Fader

Beispiel:

Erläuterung:

Beachten Sie:

CSS3-Eigenschaft `opacity`

Beispiel mit `opacity`: