JavaScript und Bilder Beispiel 3: Mit JavaScript Bilder austauschen / wechseln

Mit JavaScript lassen sich auch Bilder tauschen. Das nun folgende Beispiel zeigt, wie dies zu bewerkstelligen ist. Dazu wird als erstes ein Bild-Element definiert, welches mit einem Bild vorbelegt wird. Die darunter folgenden Links rufen die Funktion zeige_bild auf, welche weiter unten im Script definiert wird. Sie ist für das austauschen / wechseln des angezeigten Bildes zuständig.

Im auf die HTML-Tags folgenden JavaScript Code werden die vom Beispiel benötigten Bilder direkt nach dem Laden der Seite in Image-Objekten vorgeladen. Da hier mehrere Bilder benötigt werden erfolgt deren Speicherung der Bilder in einem Array. Jedes einzelne Bild wird dabei durch Erzeugung einer Instanz des Image-Objekts definiert und in einem Speicherplatz des Arrays abgelegt. Mit der SRC-Eigenschaft des Image-Objekts wird festgelegt, welche Bilddatei in das jeweilige Bildobjekt geladen werden soll.

Darauf folgend wird die Funktion zeige_bild implementiert. Diese Funktion erwartet einen Parameter mit Namen index, der die Indexposition des darzustellenden Bildes im Bilder-Array angibt. Hier wird zunächst mit einem if-Statement geprüft, ob der angegebene Index in einem gültigen Bereich liegt. Ist dem so, dann wird die URL des Bildes, welches an dieser Indexposition gespeichert ist, dem IMG-Element zugewiesen. Das Bild wurde inzwischen – initiiert durch die Verknüpfung der Bilder-URLs mit den Image-Instanzen zu beginn des Scripts – in den Browser-Cache geladen. Aus diesem Grunde erfolgt die Darstellung im Browser umgehend.

Der Zugriff auf das Element erfolgt auch hier über seine ID. Hierzu bedient sich das Script den von der Browseranwendung gegebenen Möglichkeiten zum Zugriff auf im HTML-Dokument gespeicherte HTML-Elementobjekte. Das Document-Object bietet hierzu drei Möglichkeiten an. Realisiert wird der Zugriff über eine ID, den Namen eines Elements oder den Tagnamen – implementiert durch die Methoden getElementById, getElementsByName und getElementsByTagName. Das Document-Objekt ist ein wichtiger Bestandteil des DOM.

Im Beispiel wird die Methode getElementById verwendet, da sich der Zugriff über die bereits vergebene ID anbietet. Mit der Methode getElementById wird ein Verweis auf das Bildelement ermittelt. Über diesen Verweis wird dann auf die SRC-Eigenschaft des Bildes zugegriffen.

Alle in dem Beispiel dargestellten Fotos wurden mir von einem ausgesprochenen Italien-Fan zur Verfügung gestellt. Wenn Sie sich für Italien und besonders für Reisen nach Sizilien interessieren, dann schauen Sie doch mal bei www.KunstundReisen.de rein. Hier finden Sie viele Informationen und weitere Fotos zu Reisezielen in Italien, wobei der Schwerpunkt auf Sizilien und den bekannten Ferienorten Taormina und Giardini-Naxos liegt.

<img id="tauscher" alt="" src="/javascript-demos/java-script-galerie/photos/oia_k.jpg"><br>
<a href="javascript:zeige_bild (0)" title="">Bild 1</a>
<a href="javascript:zeige_bild (1)" title="">Bild 2</a>
<a href="javascript:zeige_bild (2)" title="">Bild 3</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Array zur Speicherung von Bildobjekten
var bilder = new Array ();
// Drei Bildobjekte erzeugen und mit den entsprechenden Bildern belegen
bilder[0] = new Image ();
bilder[0].src = '/javascript-demos/java-script-galerie/photos/oia_k.jpg';
bilder[1] = new Image ();
bilder[1].src = '/javascript-demos/java-script-galerie/photos/boot_k.jpg';
bilder[2] = new Image ();
bilder[2].src = '/javascript-demos/java-script-galerie/photos/corsoumberto_k.jpg';

// Bild im oben definierten IMG-Tag austauschen
// Der Parameter index gibt an, welches Bild aus dem Array angezeigt werden soll.
function zeige_bild (index) {
  // Angegebenen Index auf Gültigkeit prüfen
  if (bilder.length > index && index >= 0)
    // Bildobjekt im IMG-Element anzeigen
    document.getElementById ('tauscher').src = bilder[index].src;
}
// -->
</script>

Bild 1 Bild 2 Bild 3

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