Bilder in JavaScript Beispiel 4: Mit JavaScript Bilder vergrößern / verkleinern

Das nächste Script implementiert einen Zoom-Effekt mit Hilfe von JavaScript. Mit dieser Funktion können Sie Bilder dynamisch vergrößern oder verkleinern lassen. Dabei wird das im Browser dargestellte Bild Schritt für Schritt in einem bestimmten Zeitintervall vergrößert – wodurch dieser Vorgang den Eindruck einer Animation erweckt. Wie Sie diese Funktion in Ihre Internetseite ein bauen können wird unter JavaScript Code in HTML integrieren erklärt.

Als erstes wird ein HTML-Bildelement definiert, welches mit der ID corso angesteuert werden kann. Das Bild wird über das Width-Attribut des IMG-Tags direkt auf 30% seiner Originalgröße verkleinert. Auch die URL des zu ladenden Bildes wird im Image-Element angegeben. Die beiden folgenden Links verden darzu benötigt, den Prozess zur vergrößerung bzw. verkleinerung zu starten. Klickt der Benutzer auf die Links, so wird die entsprechende Aktion eingeleitet.

Denkbar ist aber auch, die Größe eines Bildes nach Eintreten eines JavaScript Events einzuleiten. Hier bietet sich beispielsweise das onLoad-Event an, welches direkt nach dem Laden der Seite auftritt. Alternativ zum Aufruf über die Eigenschaft href des A-Tags kann hier auch das ebenfalls unter JavaScript definierte onClick-Event genutzt werden.

Im Script-Bereich des unteren Beispiels wird die Funktion zoom_picture definiert. Als Parameter erwartet die Funktion neben der Element-ID (angegeben als String) des zu zoomenden Bildelements die Startgröße und die Endgröße, mit der das Bild dargestellt werden soll. Diese Parameter geben die an der Originalgröße des im Fenster dargestellten Bildes gemessene Ausdehnung in Prozent an. Ist der Startwert größer als der Endwert, so wird verkleinert – im umgekehrten Fall wird vergrößert.

Zu Beginn der Funktion wird mittels if-Statement geprüft, ob bereits ein Zoom-Prozess gestartet wurde. Nachdem sich die Funktion vergewissert hat, dass es sich beim zu verarbeitenden Element auch um ein IMG-Element handelt werden über die CSS-Eigenschaften width und height die Ausdehnungswerte in der Breite und Höhe auf den Startwert gesetzt – Das Bild wird stets im originalen Seitenverhältnis vergrößert bzw. verkleinert. Ist das angegebene HTML-Element kein Bildobjekt, so wird die Verarbeitung nach Ausgabe einer entsprechenden Fehlermeldung in einer Alert Box beendet.

Nach dem Setzen der Ausdehnung des Bildelements wird mit Hilfe der Methode setInterval die Schrittweise Verarbeitung gestartet. Ziel dieses Aufrufs ist es, die Funktion zoom_picture nach Ablauf eines bestimmten Timeouts – hier 50 Millisekunden – immer wieder aufzurufen. Bei jedem Aufruf der Funktion wird das Bild um ein Prozent vergrößert oder aber verkleinert. Setinterval gehört zur Schnittstelle des vordefinierten Window-Object.

Die schrittweise Anpassung der Elementgröße folgt im unteren Teil des Scripts. Mit der Methode getElementById wird das Element über seine ID adressiert. Der durch getElementById gelieferte Verweis auf das Element dient als Zugriffspunkt auf die Style-Eigenschaften des Elements. GetElementById gehört zusammen mit den Methoden getElementsByTagName und getElementsByName zum Document-Object. Dieses Objekt spielt im Zusammenhang mit dem im Web 2.0 – und der damit verbundenen dynamischen Generierung von Internetseiten – genutzten Document Object Model (DOM) eine wichtige Rolle.

Ist die angegebene Zielgröße erreicht, so erübrigen sich weitere Aufrufe der Funktion zoom_picture. Am Ende der Funktion wird deshalb auch der laufende Intervall beendet. Hierzu wird das Gegenstück zur setInterval-Methode die Methode clearInterval verwendet.

Wenn Sie ein Bild nicht unmittelbar, sondern erst nach Ablauf eines Timeouts vergrößern oder verkleinern möchten, dann sollten Sie sich die Methode setTimeout genauer anschauen. Mit dieser Methode kann, beispielsweise nach Eintreten eines bestimmten Events (z.B. onLoad), zunächst einen Moment abgewartet werden bevor die Zoom-Funktion ausgeführt wird. Abgebrochen wird ein Timeout mit Hilfe der Methode clearTimeout.

Bei dem hier zu Demonstrationszwecken verwendeten Foto handelt es sich um eine Kirche auf dem Corso Umberto, einer stark frequentierten Flaniermeile in Taormina auf der Itailienischen Insel Sizilien. Es stammt von der Betreiberin des Internetauftritts www.KunstundReisen.de. Besonders reichhaltig sind die Informationen zu Sizilien – insbesondere die Gegend um Taormina und Giardini-Naxos scheint für sie von Interesse zu sein.

<img id="corso" width="30%" alt="" src="/javascript-demos/java-script-galerie/photos/corsoumberto.jpg"><br>
<a href="javascript:zoom_picture('corso', 30, 70)" title="">zoom in</a>
<a href="javascript:zoom_picture('corso', 70, 30)" title="">zoom out</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Bild, welches im HTML-Element mit der übergebenen ID angezeigt wird,
// prozentual vergrößern bzw. verkleinern.
// Als Parameter start und end werden Start- und Endgröße in Prozent
// angegeben. Die prozentualen Angaben beziehen sich auf die tatsächliche
// Größe des angezeigten Bildes.
function zoom_picture (element_id, start, end) {
  // Intervallverarbeitung zum animierten Zoomen noch nicht gestartet?
  if (!this.proc) {
    var element = document.getElementById (element_id);
    // Wurde die ID eines Bildobjektes angegeben?
    if (typeof element == 'object' && element.tagName == 'IMG') {
      // Startgröße im Style initialisieren
      // Größenverhältnis wird beibehalten
      element.style.width = start + '%';
      element.style.height = start + '%';
    }
    else
      // Fehler ausgeben, wenn kein Bild-Element angegeben
      alert ('Das angegebenen Element ist kein Bild!');
    // Schrittweise Verarbeitung starten
    this.proc = window.setInterval ('zoom_picture(\'' + element_id + '\', ' + start + ', ' + end + ')', 50);
  }
  else {
    // Wir befinden uns bereits in der schrittweisen Größenänderung!
    var element = document.getElementById (element_id);
    // Endgröße noch nicht erreicht?
    if (parseInt (element.style.width) != end) {
      // Größenänderung um ein Prozent
      element.style.width = parseInt (element.style.width) + (start < end ? 1 : -1) + '%';
      element.style.height = parseInt (element.style.height) + (start < end ? 1 : -1) + '%';
    }
    else {
      // Zielgröße ist erreicht und der Prozess kann beendet werden
      window.clearInterval (this.proc);
      this.proc = null;
    }
  }
}
// -->
</script>

zoom in zoom out

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