Austauschen von Grafiken per javascript in seiner simpelsten Form

Im Internet gibt es unzählige Seiten mit Tipps zu javascript und eine Menge guter Beispiele.

Gerade zum Austauschen von Grafiken per javascript werden teilweise professionelle Strukturen mit eingebundenen externen Dateien und komplexen Funktionsaufrufen bemüht.

Dieses Beispiel zeigt den Austausch von Bilddateien in seiner einfachsten Form.

Beachten Sie bitte beim Einsatz von javascript stets, daß Sie den erfolgreichen Besuch der Webseite nicht von Skript-Funktionen abhängig machen, die in den Browsern vieler Besucher abgeschaltet sind oder aufgrund von Versionsunterschieden nicht verstanden werden können.
Es gibt Unmengen verschiedener Browser in verschiedensten Versionen, die wiederum Scriptsprachen wie z.B. javascript in unterschiedlichsten Sprachversionen verstehen.

Das hier gezeigte Beispiel bemüht keine Scriptbereiche, keine eingebundenen Scriptdateien und keine Funktionsaufrufe:

Und so sieht das oben genannte Beispiel aus, wenn es in einem Browser dargestellt wird. Beim Überfahren der Grafik mit der Maus wird diese gegen eine andere ausgetauscht.

Die fett hervorgehobenen Bestandteile des angeführten html-Quelltextes definieren für das img-Tag zwei javascript- Eventhandler (o.a. Ereignisbehandler), einen für das Überfahren der Grafik mit der Maus ("onMouseover") und einen für den Fall, daß die Maus von der Grafik wieder wegbewegt wird ("onMouseout").
"this" ist eine sog. Objektreferenz, das im Sprachmodell von javascript auf das Objekt zeigt, in dem "this" notiert wurde. "scr" verweist durch einen Punkt abgesetzt auf eine Eigenschaft des Objektes. In diesem Fall ist das Objekt ein html-Tag ("img"), mit dem Bilder referenziert werden und "src" steht als Eigenschaft für engl. source, also die Herkunft des Bildes.

Bei größeren Grafiken oder mehreren Bildern, die auf einer Webseite dynamisch ausgetauscht werden sollen, empfiehlt sich das Vorausladen (preload) der betroffenen Grafikdateien.

Beachten Sie hierzu auch bitte die Informationen zu den "img"-Attributen "alt" und "title".