Bilder in JavaScript Beispiel 6: Mit JavaScript Bilder überblenden

Im nun folgenden JavaScript-Beispiel wird ein Bild in ein anderes übergeblendet. Dazu werden die beiden Bilder über IMG-Tags definiert und mit Style-Angaben entsprechend übereinander positioniert. Wenn Sie nun die unteren Links anklicken, dann wird der Überblendungsvorgang durch Aufruf der entsprechenden Funktion gestartet. Für das Überblenden vom einen auf das andere Bild wird wieder die CSS-Eigenschaft zur Steuerung der Transparenz – bei Mozilla- und Opera-Browsern mit der Eigenschaft opacity; im IE mittels Alpha-Filter realisiert – genutzt.

Im Script-Abschnitt unten wird eine Funktion definiert, welche den animierten Überblend-Effekt implementiert. Die Funktion nimmt zwei Parameter entgegen, in denen die Element-IDs (als String angegeben) der an der Überblendung beteiligten Bildelemente enthalten müssen. Beim ersten Aufruf der Funktion wird der intervallgesteuerte Prozess nur gestartet aber noch keine weiteren Operationen zur Überblendung druchgeführt.

Nachdem die Funktion sichergestellt hat, dass die Elemente nicht die selbe ID haben (Überblenden auf das selbe Element ist eben wenig sinnvoll), wird der Effekt mittels eines intervallgesteuerten Prozesses angestoßen. Hier kommt wieder die JavaScript-Methode setInterval zum Einsatz, die unter setInterval näher beschrieben wird. Das Überblenden ist übrigens nicht allein bei Angabe der IDs von IMG-Tags möglich. Auch andere HTML-Elementobjekte, wie beispielsweise DIVs können hier angegeben werden.

Erst nach Ablauf des ersten Intervalls (Pause zwischen den einzelnen Aufrufen der Funktion fade_to), der durch das Script mit 50 Millisekunden festgelegt ist, wird der erste Schritt der Überblendung durchgeführt. Mit getElementById werden die betreffenden HTML-Elemente über deren IDs ermittelt. Die Methode getElementById gehört zum Document-Object und ist ein wichtiger Bestandteil der DOM-API, welche zur Erstellung dynamischer Webseiten genutzt werden kann. Handelt es sich bei den angegebenen Elementen um ein und dasselbe Element – was mit einem if-Statement geprüft wird –, so wird die Verarbeitung – nachdem eine Fehlermeldung in einer Alert Box ausgegeben wurde – abgebrochen. Als nächstes werden die Transparenzwerte der Elemente aus den Style-Angaben extrahiert. Hier muss auf die Eigenarten einzelner Browser Rücksicht genommen werden (siehe auch Beispiel 5 - Mit JavaScript Bilder einblenden / ausblenden). Während der Internet Explorer die Transparenz von HTML-Elementen über Filter steuert, gibt es unter Mozilla und Opera die Style-Eigenschaft opacity.

Da immer vom im ersten Parameter angegebene Bild-Element ausgegangen wird (Bild aus Parameter 1 wird auf Bild aus Parameter 2 übergeblendet), passt die Funktion die Transparenz beider Bilder – in umgekehrter Richtung – bei den einzelnen Funktionsaufrufen schrittweise an, bis das erste Bildelement die volle Transparenz erreicht hat (wird bei jedem Schritt direkt im Fenster dargestellt). Beim letzen Aufruf der Funktion ist der Transparenzwert des ersten Bildes auf 0 und der des zweiten Bildes auf 1 – entspricht 0 bzw. 100%; im IE werden die Transparenzwerte auch in Prozent angegeben, weshalb im IE-Teil der Funktion jeweis durch 100 geteilt bzw. multipliziert wird, wenn der Transparenzwert ermittelt bzw. gesetzt wird.

Am Ende der Funktion im unteren JavaScript-Code wird der Intervall durch Aufruf der Methode clearInterval beendet, damit die Funktion nicht weiter aufgerufen wird. Dieser Teil des Scripts wird erst ausgeführt, wenn die Überblendung bereits erfolgreich beendet wurde. Die Methoden setTimeout und clearTimeout gehören zur Schnittstelle des JavaScript Window-Object.

Es dürfte keine großen Probleme bereiten, das fade-Beispiel in eine bestehende Internetseite zu integrieren. Unter JavaScript Code in HTML integrieren erfahren Sie, wie Sie das untere Script in Ihre Website einbauen können. Neben der intervallgesteuerten Verarbeitung gibt es in JavaScript auch die Möglichkeit Anweisungen mit einer zeitlichen Verzögerung aufzurufen. Hierzu bietet sich die Verwendung von setTimeout zum Einleiten eines Timeouts und die Methode clearTimeout zum Beenden eines Timeouts an.

Die Bilder stammen übrigens nicht von mir sondern sind, zusammen mit vielen anderen, unter www.KunstundReisen.de zu sehen. Wenn sie sich für Sizilien und andere Reiseziele in Italien interessieren, dann schauen Sie doch einfach mal dort rein.

<img style="position:relative; top:0px; left:0px; z-index:2;" id="fadeto" alt="" src="/javascript-demos/java-script-galerie/photos/nr7_k.jpg">
<img style="position:relative; top:0px; left:-68pt; z-index:1; opacity:0;" id="fadeto2" alt="" src="/javascript-demos/java-script-galerie/photos/tower1_k.jpg">
<br><a href="javascript:fade_to ('fadeto', 'fadeto2')" title="">Bild &uuml;berblenden</a><br>
<a href="javascript:fade_to ('fadeto2', 'fadeto')" title="">Bilder zur Ausgangssituation &uuml;berblenden</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion zum Überblenden von einem Bild auf ein anderes
// Mit den beiden Parametern werden die IDs der Bildelemente angegeben,
// die ineinander übergeblendet werden sollen.
function fade_to (element_id1, element_id2) {
  // Prozess noch nicht gestartet?
  if (!this.proc) {
    // Überblendung auf das gleiche Bild ist nicht möglich!
    if (element_id1 == element_id2) {
      alert ('Sie muessen die IDs zweier unterschiedlicher HTML-Elemente angeben!');
      return;
    }
    // Prozess starten
    this.proc = window.setInterval ('fade_to(\'' + element_id1 + '\', \'' + element_id2 + '\')', 50);
  }
  else {
    // Effekt läuft bereits
    // Verweise auf die Elemente holen...
    var e = document.getElementById (element_id1);
    var e2 = document.getElementById (element_id2);
    var opacity1, opacity2;
    // Aktuelle Transparenz der beiden Bilder bei
    // Opera und Mozilla-Abkömmlingen mit opacity Style-Eigenschaft..
    if (!e.filters) {
      opacity1 = !e.style.opacity ? 1 : parseFloat (e.style.opacity);
      opacity2 = !e2.style.opacity ? 0 : parseFloat (e2.style.opacity);
    }
    // bzw. über die Filter des IE ermitteln.
    else {
      opacity1 = !e.filters.alpha.opacity ? 1 : parseFloat (e.filters.alpha.opacity) / 100;
      opacity2 = !e2.filters.alpha.opacity ? 0 : parseFloat (e2.filters.alpha.opacity) / 100;
    }
    // Volle Transparenz von Bild 1 noch nicht erreicht?
    if (opacity1 != 0) {
      // Transparenz der beiden Bilder um 5% in die unterschiedlichen
      // Richtungen anpassen.
      opacity1 -= 0.05;
      opacity2 += 0.05;
      // Anpassung der Styles erfolgt wieder Browserabhängig
      if (!e.filters) {
        e.style.opacity = opacity1;
        e2.style.opacity = opacity2;
      }
      else {
        e.filters.alpha.opacity = opacity1;
        e2.filters.alpha.opacity = opacity2;
      }
    }
    else {
      // Volle Transparenz von Bild 1 erreicht!
      // Das andere Bild ist in diesem Fall vollständig eingeblendet!
      window.clearInterval (this.proc);
      this.proc = null;
    }
  }
}
// -->
</script>

Bild überblenden
Bilder zur Ausgangssituation überblenden

« zurück zu Seite 1 2 3 4 5 weiter zu Seite 7 »