Bilder in JavaScript Beispiel 5: Mit JavaScript Bilder einblenden / ausblenden

Folgendes JavaScript-Beispiel demonstriert die Möglichkeiten zum Einblenden und Ausblenden von Bildern. Hier werden die Bilder per Funktionsaufruf entweder umgehend oder aber in einem Intervall animiert – über die CSS-Eigenschaften – angezeigt bzw. versteckt (show / hide). Das Bild, mit dem diese Operationen durchgeführt werden trägt die ID showhide, worüber es im Script angesprochen wird. Zur Demonstration der jeweiligen Funktion klicken Sie bitte die Links im Beispiel unten an. Bitte beachten Sie auch unsere Beispiele zum Ein- und Ausblenden von DIVs.

Die erste Funktion mit dem Namen hide_picture kann dazu verwendet werden, ein im Parameter übergebenes Bildobjekt auszublenden. Übergeben wird nicht die ID des Bildelements sondern ein zuvor per getElementById, getElementsByTagName oder getElementsByName ermitteltes Bild-Objekt – siehe Aufruf der Funktion im ersten und zweiten Beispiellink. GetElementById ist ein wichtiger Bestandteil des Document Object Model (DOM). Innerhalb der JavaScript-Objekthierarchie ist diese Methode unter Anderem dem Document-Object untergeordnet. Nachdem die Funktion sich davon überzeugt hat, dass es sich beim übergebenen HTML-Elementobjekt um ein IMG-Element handelt, wird das Element durch Anpassung des Style-Objekts ausgeblendet. Der Browser versteckt das Bild automatisch nachdem der Visibility-Eigenschaft im Style-Objekt des IMG-Elements der Wert hidden zugewiesen wurde. Handelt es sich nicht um ein Bildelement, so passiert nichts.

Mit der zweiten Funktion im unteren JavaScript-Code können Sie mit JavaScript Bilder anzeigen, nachdem diese zuvor mit Hilfe der Funktion hide_picture ausgeblendet wurden. Im Prinzip geschieht hier dasselbe, wie in der zuvor beschriebenen Funktion. Einziger Unterschied ist, dass die Visibility-Eigenschaft nicht auf hidden, sondern auf visible gesetzt wird, wodurch das Bild umgehend wieder im Fenster angezeigt wird.

Weiter unten im Script wird eine Funktion definiert, die in der Lage ist ein Bildelement schrittweise ein- oder auszublenden (fade-in und fade-out Effekt, wordurch der Eindruck eines animierten Einblendens bzw. Ausblendens entsteht. Als Parameter erwartet die Funktion zum Einen die ID (als String) des ein- bzw. auszublendenden HTML-Elements und die Schrittweite, mit der das Bild ein- oder ausgeblendet werden soll. Der zweite Parameter gibt an, in welchen Schrittweiten der Vorgang ablaufen soll – die Skala läuft von 0 (volle Transparenz; Ausgeblendet) bis 1 (keine Transparenz; vollständig Eingeblendet). Hier machen Werte unterhalb von null – etwa 0.05, wie im Beispiel verwendet – Sinn. Je kleiner der absolute Wert, desto feiner und damit langsamer erfolgt der Effekt. Wird ein negativer Wert angegeben, so wird ausgeblendet, während ein positiver Wert das Bild einblendet.

In der Funktion wird als erstes per if-Statement geprüft, ob die Schrittweite einen sinnvollen Wert enthält und die Verarbeitung gegebenenfalls nach Anzeige einer Fehlermeldung in einer Alert Box abgebrochen, wenn dem nicht so ist. Der eigentliche Vorgang des Einblendens oder Ausblendens wird auch hier wieder mittels Intervallverarbeitung über die Methode setInterval gestartet. Auch hier wird wieder auf die Eigenarten der unterschiedlichen Browseranwendungen eingegangen, wenn es um die Ermittlung der Transparenz eines Bildes geht (Siehe Beispiel 6 - Mit JavaScript Bilder überblenden).

Bei jedem Aufruf der Funktion fade_in_out wird das angegebene Bildelement Schritt für Schritt über seine Style-Eigenschaften transparenter bzw. weniger transparent gemacht. Ist der Endzustand (vollständig eingeblendetes bzw. ausgeblendetes Bild) erreicht, so wird der Intervall mit der Methode clearInterval beendet und die Funktion künftig nicht mehr aufgerufen. Ebenso wie setInterval gehört clearInterval zum in JavaScript vordefinierten Window-Object.

Das Aus- und Einblenden von HTML-Elementen kann aber nicht allein durch Anklicken (durch das onClick-Event oder direkt per href) eine HTML-Elements angestossen werden. Sie können auch einen automatischen Ausblendvorgang durch das onLoad-Event, welches direkt nach dem Laden der Seite ausgelöst wird, durchführen lassen. Dies ist praktisch, wenn Sie ein Bild beispielsweise nur direkt nach dem Laden einer Seite darstellen wollen. Unter Verwendung der Methode setTimeout können Sie das Element nach einem bestimmten Timeout automatisch ausblenden.

Zu solchen und ähnlichen Zwecken bietet das JavaScript-Objekt Event und die in JavaScript auslösbaren Events viele verschiedene Möglichkeiten. Einige der von JavaScript unterstützten Events werden auch auf dieser Seite beschrieben. Beachten Sie hierzu bitte die seitliche Navigation. Hier ist neben dem onLoad-Event auch das onClick-Event zu finden.

Die in dem Beispiel genutzen Bilder wurden freundlicherweise von www.KunstundReisen.de zur Verfügung gestellt. Falls Sie sich für Städtereisen nach Italien – insbesondere nach Sizilien – interessieren, dann klicken Sie sich doch mal rein.

<img id="showhide" alt="" src="/javascript-demos/java-script-galerie/photos/nr7_k.jpg"><br>
<a href="javascript:hide_picture (document.getElementById ('showhide'))" title="">Bild ausblenden</a><br>
<a href="javascript:show_picture (document.getElementById ('showhide'))" title="">Bild einblenden</a><br>
<a href="javascript:fade_in_out ('showhide', -0.05)" title="">Bild schrittweise ausblenden</a><br>
<a href="javascript:fade_in_out ('showhide', 0.05)" title="">Bild schrittweise einblenden</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Bildobjekt über die Visibility-Eigenschaft des Style verstecken
function hide_picture (element) {
  // Bild angegeben?
  if (typeof element == 'object' && element.tagName == 'IMG')
    // Style-Eigenschaft zum Ausblenden setzen
    element.style.visibility = 'hidden';
}

// IMG-Element per Style sichtbar machen
function show_picture (element) {
  // Handelt es sich um ein Bildelement?
  if (typeof element == 'object' && element.tagName == 'IMG')
    // Bildelement einblenden
    element.style.visibility = 'visible';
}

// Funktion kann mit JavaScript Bilder schrittweise (animiert) ausblenden
// Die Element-ID des auszublendenden Elements wird als Zeichenkette angegeben.
// Der zweite Parameter gibt die Schrittweite an, mit der das Bild ein- oder
// ausgeblendet werden soll. Negative Werte blenden aus; Positive blenden ein
function fade_in_out (element_id, step) {
  // Intervall noch nicht gestartet?
  if (!this.proc) {
    // Schrittweite muss positiv oder negativ sein, da
    // sonst weder aus- noch eingeblendet wird.
    if (step == 0) {
      // Fehlermeldung und Beenden, wenn Schrittweite == 0
      alert ('Schrittweite darf nicht 0 sein!');
      return;
    }
    // Ansonsten kann die Animation gestartet werden.
    this.proc = window.setInterval ('fade_in_out(\'' + element_id + '\', ' + step + ')', 50);
  }
  else {
    // Wir befinden uns bereits in der Ein- Ausblendphase
    var e = document.getElementById (element_id);
    // Variable zur Speicherung der Transparenz des Elements
    var opacity;
    // Opera, Mozilla & Co. verwenden die Style-Eigenschaft opacity
    if (!e.filters)
      opacity = !e.style.opacity ? step > 0 ? 0 : 1 : parseFloat (e.style.opacity);
    // Ansonsten wird der Alpha-Filter von IE verwendet
    else
      // Opacity wird beim IE in Prozent angegeben
      opacity = !e.filters.alpha.opacity ? step > 0 ? 0 : 1 : parseFloat (e.filters.alpha.opacity) / 100;
    // Zieltransparenz erreicht? (0, wenn ausgeblendet wird; 1, wenn eingeblendet wird)
    if ((step < 0 && opacity != 0) ¦¦
        (step > 0 && opacity != 1)) {
      // Transparenz um Schrittweite anpassen
      opacity += step;
      // Beim setzen der neuen Transparenz wieder auf die verschiedenen Browser auchten!
      if (!e.filters)
        e.style.opacity = step < 0 ? opacity < 0 ? 0 : opacity : opacity > 1 ? 1 : opacity;
      else
        e.filters.alpha.opacity = step < 0 ? opacity < 0 ? 0 : opacity * 100 : opacity > 1 ? 100 : opacity * 100;
    }
    else {
      // Endzustand (vollständig ein- bzw. ausgeblendet) erreicht!
      // Prozess kann nun abgebrochen werden.
      window.clearInterval (this.proc);
      this.proc = null;
    }
  }
}
// -->
</script>

Bild ausblenden
Bild einblenden
Bild schrittweise ausblenden
Bild schrittweise einblenden

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