JavaScript/DOM/Document/images/src
Die Eigenschaft src speichert die Angabe, welche Grafikdatei angezeigt wird, wie sie mit dem Attribut src im <img>-Tag möglich ist. Diese Eigenschaft lässt sich ändern. Dadurch können Sie Grafiken dynamisch durch andere ersetzen. Beachten Sie jedoch, dass Breite und Höhe der ursprünglich im HTML notierten Grafik für alle dynamisch folgenden Grafiken übernommen werden. Um verzerrungsfreie Effekte zu erzielen, sollten also alle Grafiken, die einander dynamisch ersetzen, die gleiche Höhe und Breite haben.
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="hans.gif" width="400" height="300" alt="Hans">
<script>
let b = new Array();
b[0] = new Image(); b[0].src = "holger.gif";
b[1] = new Image(); b[1].src = "hilmar.gif";
b[2] = new Image(); b[2].src = "heiner.gif";
b[3] = new Image(); b[3].src = "hans.gif";
let i = 0;
function Animation () {
if (i > 3)
i = 0;
document.images[0].src = b[i].src;
i = i + 1;
window.setTimeout("Animation()", 1000);
}
window.setTimeout("Animation()", 1000);
</script>
</body>
</html>
Das Beispiel enthält eine Grafik namens hans.gif. Unterhalb davon ist ein Script-Bereich notiert, der dafür sorgt, dass die Grafik sich automatisch jede Sekunde in eine andere Grafik verwandelt. Dazu wird zunächst ein Array namens b notiert. Danach werden vier Elemente des Arrays b bestimmt. In allen vier Fällen handelt es sich um neue Grafikobjekte. Jedem der neuen Grafikobjekte wird mit der Eigenschaft src eine Grafikdatei zugewiesen. Beachten Sie, dass auch die Datei hans.gif wieder dabei ist, obwohl diese bereits angezeigt wird. Da sie in die Animation integriert werden soll, muss für sie aber trotzdem noch mal ein eigenes neues Grafikobjekt erzeugt werden.
Innerhalb der Funktion Animation(), die unterhalb der Funktion zum ersten Mal aufgerufen wird, wird das jeweils aktuelle Bild durch ein anderes ersetzt. Das geschieht durch Zuweisung von b[i].src an document.images[0].src. Da b[i] abhängig von der Variablen i ist, die bei jedem Funktionsaufruf verändert wird, wird jedes mal ein anderes der vier Bilder angezeigt. Am Ende ruft sich die Funktion Animation() selbst wieder auf. So entsteht der Endlos-Effekt. Der Aufruf ist in einen setTimeout()-Aufruf eingebunden, der den nächsten Aufruf jeweils um 1000 Millisekunden, also um eine Sekunde, verzögert.
