JürgenB: Mehrere Grafiken dynamisch ersetzen

Beitrag lesen

Hallo Micha,

http://de.selfhtml.org/javascript/objekte/images.htm#src

das kann man so machen, ich finde es aber problematisch, nur über die Nummer auf die Bilder zuzugreifen. Daher plädiere ich für die getElementBy...-Methoden: http://de.selfhtml.org/javascript/objekte/document.htm.

Dafür brauchen die Bilder eine eindeutige ID:

<img id="Otto" src="otto.jpg">
<img id="Franz" src="franz.jpg">
   usw.

auf die Quelle der Bilder kannst Du dann mit

document.getElementById("Otto").src="otto_neu.jpg";

zugreifen.

Dazu kannst Du dir auch eine Funktion basteln:

function Bildwechsel(id,Quelle) {
 document.getElementById(id).src=Quelle;
}

Aufgerufen wird das dann mit:

Bildwechsel("Otto","otto_neu.jpg");
Bildwechsel("Franz","franz_neu.jpg");
   usw.

In dieser Form werden aber alle Bilder fast gleichzeitig ausgetauscht. Für eine Zeitsteuerung wird dann noch setTimeout benötigt:

window.setTimeout('Bildwechsel("Otto","otto_neu.jpg");',1000);
window.setTimeout('Bildwechsel("Franz","franz_neu.jpg");',2000);

Jetzt wird das erste Bild nach einer (1000ms) und das zweite nach zwei Sekunden (2000ms) gewechselt.

Jetzt musst Du nur noch sicherstellen, das die Bilder zum Zeitpunkt des Wechselns auch schon existieren. Der onload-Eventhandler könnte hier helfen.

Gruß, Jürgen

PS Die Scripte sind nicht getestet, daher kann eine fehlerfreie Funktion nicht garantiert werden.