Bilder mit JavaScript präsentieren

Mit JavaScript lassen sich allerlei Effekte mit Bildern erzielen. Im Zuge der „Dynamisierung” des Web – Stichwort Web 2.0 – und den damit verbundenen Anwendungen gewinnen Effekte, die einer Internetseite den gewissen Pfiff geben sollen, immer mehr an Bedeutung. Diese dynamischen Seiten erwecken beim Benutzer den Eindruck einer lokalen Anwendung, da per JavaScript unmittelbar auf Benutzeraktionen reagiert wird ohne dass die Seite jedesmal neu geladen werden muss – das Document Object Model (DOM) spielt hier eine besondere Rolle. Zur Demonstration der gegebenen Möglichkeiten habe ich einige Beispiele erstellt, mit denen Bilder vorgeladen, gezoomt, ein- und ausgeblendet, übergeblendet oder gescrollt werden können. Wie Sie die entsprechenden Scripts in Ihre Seite einbauen können wird auf der Seite JavaScript Code in HTML integrieren erklärt.

Eine Gemeinsamkeit haben alle hier gezeigten Beispiele: Zur Realisierung der Operationen, die mit den Bildelementen durchgeführt werden, erfolgt der Zugriff auf die HTML-Elemente (in diesem Fall die Bilder, mit denen die jeweilige Operation durchgeführt werden soll) stets über den HTML-Elementenbaum. Mittels CSS-Eigenschaften der Bildelemente werden die Position (Attribute top und left), die Größe (Attribute width und height) oder die Sichtbarkeit (opacity oder visibility) entsprechend dynamisch angepasst. Die hierdurch umgesetzten Änderungen im Layout der Seite werden umgehen im Fenster des Webbrowsers angezeigt.

Neben dem unten gezeigten Beispiel, in dem ein Bildelement gescrollt wird, finden Sie auf den Folgeseiten weitere Anwendungsbeispiele zum Thema JavaScript & Bilder. Ähnliche Operationen sind auch mit DIV-Elementen möglich – auch hier stehen entsprechende Beispiele für Sie bereit. Das letzte der hier gezeigten Beispiele zum Thema Bilder ist auch im Zusammenhang mit DIV-Elementen von Interesse. Hier wird ein DIV-PopUp zur Präsentation eines Bildes geöffnet. Dies kann nützlich sein, wenn es durch Verwendung eines PopUp-Blockers auf Anwenderseite nicht möglich ist ein PopUp in JavaScript zu öffnen.

JavaScript und Bilder Beispiel 1: Mit JavaScript Bilder bewegen / scrollen

Das erste Beispiel, in dem der Umgang mit Bildern in JavaScript demonstriert werden soll, zeigt, wie Sie ein Bild im Browserfenster bewegen können. Zuallererst wird ein Bildelement (IMG-Tag) definert, welches mit einer ID, einer Style-Definition und mit einer URL – unter der das im Element anzuzeigende Bild gespeichert ist – vorbelegt. Die Style-Definition legt für das Bild fest, dass es im dargestellten HTML-Dokument absolut positioniert werden soll. Dies ist nötig, da ein freies Bewegen des IMG-Elements nur auf Grundlage absoluter Positionierung möglich ist – das Element soll auch sein Elter-Element verlassen können. Darauf folgend werden zwei Links (A-Tags) definiert, welche in ihrer href-Eigenschaft einen Aufruf der später definierten Funktion relative_scroll_image auslösen.

In nun folgenden JavaScript-Code werden die beiden Funktionen relative_scroll_image und scroll_image definiert. Die Funktion relative_scroll_image ruft intern die Funktion scroll_image, die den eigentlichen Scrollvorgang durchführt, auf. Sie bewegt ein bestimmtes IMG-Element relativ zur aktuellen Position um eine angegebene Differenzstrecke. Relative_scroll_image erwartet drei Parameter. Im ersten wird die HTML-Element-ID des zu scrollenden HTML-Elements in Form eines JavaScript String-Objekts angegeben. Der zweite Parameter gibt das Timeout zwischen zwei Aufrufen der Bewegungsfunktion scroll_image an und legt damit die Geschwindigkeit, mit der das Element bewegt wird, vor. Mit den beiden letzten Parametern werden die zurückzulegenden Stecken für den Scroll-Vorgang in X- und Y-Richtung (horizontal und vertikal) vorgegeben. Negative Werte bewegen das Element nach links bzw. nach oben; Positive nach rechts und nach unten. Nachdem die Funktion die aktuelle Position des zu bewegenden IMG-Elements ermittelt und die relativen Bewegungswerte einbezogen hat, wird die Funktion scroll_image aufgerufen, welche die eigentliche Arbeit erledigt.

Die Funktion scroll_image folgt im Script-Code nach der Funktion relative_scroll_image. Hier werden in den ersten beiden Parametern die selben Werte verlangt, wie bei der zuvor beschriebenen Funktion. Mit left_end und top_end wird die absolute Position angegeben, zu der das IMG-Element bewegt werden soll. Die beiden letzten Parameter sind optional und geben die Startposition des Elements an. Werden hier Werte vorgegeben, so wird das HTML-Element zu Anfang an die Startposition gesetzt und ausgehend von dieser Position die Bewegung vollzogen. Fehlt eine Angabe dieser Parameter, so wird das Bildelement ausgehend von der aktuellen Elementposition bewegt.

Wie bereits erwähnt, wird das zu bewegende HTML-Element über seine Element-ID ermittelt. Hierzu wird die Methode getElementById verwendet, die einen Verweis auf ein Element aus dem HTML-Elementenbaum mittels der als Parameter angegebenen Element-ID ermittelt. GetElementById ist zusammen mit getElementsByName und getElementsByTagName Teil der Schnittstelle des in JavaScript vordefinierten Document-Object.

Über ein if-Statement wird zu Anfang der Funktion scroll_image geprüft, ob der Bewegungsprozess bereits läuft. Ebenfalls geprüft wird, ob es sich beim angegebenen HTML-Element auch um ein IMG-Objekt handelt. Wurde dies negativ getestet, so wird die Funktion – nach Ausgabe einer entsprechenden Fehlermeldung per Alert Box – beendet. Ist bis hierher alle in Ordnung, so wird das Element über seine Style-Eigenschaften initialisiert und die Funktion per setInterval mit den Start- und Zielkoordinaten aufgerufen. Hierüber wird die intervallgesteuerte Verarbeitung gestartet und der Bewegungsprozess damit initiiert

Bei jedem nun (mittels Intervallzyklus) folgenden Aufruf der Funktion wird das Element schrittweise um eine jeweis berechnete Schrittweite bewegt. Die neu errechneten Positionswerte werden bei jedem Aufruf in den Style-Eigenschaften des IMG-Elements gespeichert und der Browser stellt die Positionsänderung direkt nach der Zuweisung dar.

Ist das Bild an der Zielposition angelangt, so ist kein weiterer Aufruf der Funktion vonnöten – weitere Aufrufe der Funktion sind überflüssig und kosten nur unnötig Rechenleistung. Damit die Funktion jetzt nicht mehr aufgerufen wird, muss der laufende Intervall mit Hilfe der Methode clearInterval beendet werden.

Im hier gezeigten Beispiel wird die Funktion über das Anklicken eines normalen Links gestartet. Aber auch das automatische Starten derartiger Bewegungsvorgänge ist möglich. Hierzu bietet sich das Event-Object an, mit dem die Bewegung als Reaktion auf ein bestimmtes Benutzerereignis ausgelöst werden kann. Einige der unter JavaScript nutzbaren Events werden unter onLoad-Event und onClick-Event beschrieben.

Auch das verzögerte Starten einer Bildbewegung ist machbar. Soll beispielsweise nach dem Laden eines HTML-Dokuments erst eine gewisse Zeit verstreichen, bevor die Bewegung durchgeführt wird, so bietet sich die Methode setTimeout an, um die Bewegung nach Ablauf eines Timeouts zu starten. SetTimeout ist Bestandteil des in JavaScript vordefinierten Window-Object, welches auch die Methoden setInterval und clearInterval beinhaltet.

Die auf dieser Beispielseite gezeigten Fotos stammen aus einer Reihe von Fotogalerien, die unter www.KunstundReisen.de zu erreichen sind. Auf dieser Seite geht es vornehmlich um Städtereisen nach Italien. Süditalien und die Insel Sizilien, sowie die umliegenden Liparischen Inseln werden besonders ausführlich behandelt.

<img id="sim" style="position:absolute;" alt="" src="/javascript-demos/java-script-galerie/photos/nr7_k.jpg"><br><br><br><br><br><br><br><br><br>
<a href="javascript:relative_scroll_image ('sim', 50, 100, 0)" title="">Bild nach rechts scrollen</a>
<a href="javascript:relative_scroll_image ('sim', 50, -100, 0)" title="">Bild nach links scrollen</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion ermittelt die Position eines HTML-Elements und bewegt dieses
// mit Hilfe der Funktion scroll_image um angegebene Differenzwerte in
// X- und Y-Richtung.
function relative_scroll_image (element_id, timeout, dx, dy) {
  var e = document.getElementById (element_id);
  var xpos, ypos;
  // Style-Eigenschaften bereits initialisiert?
  if (e.style.top && e.style.left) {
    // Position ermitteln
    xpos = parseInt(e.style.left);
    ypos = parseInt(e.style.top);
  }
  else
    // Wird Computed Style unterstützt?
    if (window.getComputedStyle) {
      // Position ermitteln
      var style = document.defaultView.getComputedStyle (e, null);
      xpos = parseInt (style.getPropertyValue ('left'));
      ypos = parseInt (style.getPropertyValue ('top'));
    }
    // Wird der IE eingesetzt, dann existiert currentStyle.
    else if (e.currentStyle) {
      xpos = parseInt (e.currentStyle.left);
      ypos = parseInt (e.currentStyle.top);
    }
  // Relative Bewegung des Elements durchführen
  scroll_image (element_id, timeout, xpos + dx, ypos + dy);
}

// Bildelement animiert von Startposition zu Zielposition bewegen
function scroll_image (element_id, timeout, left_end, top_end, left_start, top_start) {
  var element = document.getElementById (element_id);
  // Intervallverarbeitung noch nicht gestartet?
  if (!this.proc) {
    // Nur Bildelemente bewegen
    if (typeof element == 'object' && element.tagName == 'IMG') {
      // Startvorgaben angegeben?
      // Wenn ja zur Sicherheit an die Startposition setzen.
      if (left_start)
        element.style.left = left_start;
      if (top_start)
        element.style.top = top_start;
      // Position des Elements noch nicht in den Style-Angaben gespeichert?
      if (!element.style.left ¦¦ !element.style.top)
        // Position wenn möglich über Computed-Style ermitteln...
        if (window.getComputedStyle) {
          var style = document.defaultView.getComputedStyle (element, null);
          element.style.left = style.getPropertyValue ('left');
          element.style.top = style.getPropertyValue ('top');
        }
        // Position bei IE mit currentStyle ermitteln...
        else if (element.currentStyle) {
          element.style.left = element.currentStyle.left;
          element.style.top = element.currentStyle.top;
        }
        // und ansonsten den Startpunkt auf Position 0,0 setzen.
        else {
          element.style.left = '0px';
          element.style.top = '0px';
        }
      // Spätestens jetzt ist das Element initialisiert!
      left_start = parseFloat (element.style.left);
      top_start = parseFloat (element.style.top);
      // Intervallverarbeitung für die Schrittweise Bewegung starten.
      this.proc = window.setInterval ('scroll_image (\'' + element_id + '\', ' + timeout + ', ' + left_end + ', ' + top_end + ', ' + left_start + ', ' + top_start + ')');
    }
    else
      // Kein Bildelement angegeben!
      alert ('Das angegebenen Element ist kein Bild!');
    // Der Rest wird über den Intervall gemacht.
    return;
  }

  // Einheiten der Style-Angaben ermitteln
  element.style.left.match (/[0-9.]+(.+)/);
  var ex = RegExp.$1 ¦¦ 'px';
  element.style.top.match (/[0-9.]+(.+)/);
  var ey = RegExp.$1 ¦¦ 'px';
  // Schrittweiten für die Bewegung in X- und Y-Richtung errechnen.
  var delta_x, delta_y;
  if (left_start != left_end) {
    delta_x = (ex == 'px' ¦¦ ex == 'pt') ? 2 : 0.02;
    var steps = (left_start < left_end ? left_end - left_start : left_start - left_end) / delta_x;
    delta_y = (top_start < top_end ? top_end - top_start : top_start - top_end) / steps;
  }
  else {
    delta_x = 0;
    delta_y = (ey == 'px' ¦¦ ey == 'pt') ? 2 : 0.02;
  }

  // Noch nicht an der Zielposition angekommen?
  if (parseInt (element.style.left) != left_end ¦¦
      parseInt (element.style.top) != top_end) {
    // Neue Position berechnen und in den Style-Eigenschaften setzen.
    var left = parseFloat (element.style.left) + (left_start < left_end ? delta_x : -delta_x);
    left = (left > left_end ? left - left_end : left_end - left) < delta_x ? left_end : left;
    element.style.left = left + ex;
    var top = parseFloat (element.style.top) + (top_start < top_end ? delta_y : -delta_y);
    top = (top > top_end ? top - top_end : top_end - top) < delta_y ? top_end : top;
    element.style.top = top + ey;
  }
  // Ziel erreicht! Intervall beenden!
  else {
    window.clearInterval (this.proc);
    this.proc = null;
  }
}
// -->
</script>










Bild nach rechts scrollen Bild nach links scrollen



¬ Insolvenzrecht