Homepage de.comp.lang.javascript
Homepage
de.comp.lang.javascript

FAQ de.comp.lang.javascript

FAQ
de.comp.lang.javascript

 

 

Bitte verwenden Sie als Einstiegsadresse in diese FAQ die Homepage der Newsgroup de.comp.lang.javascript. Der Aufenthaltsort dieser Seiten hier kann sich ohne Vorwarnung ändern.
 

 

Wie ändere ich Bilder nach dem Laden der Web-Seite?

Inhalt dieser Seite

Bilder vorladen
Bilder ändern, sobald die Maus darüber ist
Bilder in anderen Frames/Fenstern ändern
Fehlerquellen, Browserspezifisches

 

Bilder vorladen

Im einem HTML-Dokument wird eine Grafik durch das Element

<IMG NAME="testbild" SRC="bild1.gif">

geladen. Dieses Bild wird wie gewohnt nach dem Laden angezeigt.

Soll dieses Bild nach dem Laden und der Darstellung einer Webseite durch ein anderes ersetzt werden, so sollte das neue Bild zuvor vorgeladen werden. Das neue Bild seht anschließend ohne Verzögerung zur Verfügung, und Effekte wie Aufleuchten oder Bewegung können durch Ersetzen des bereits dargestellten Bildes angedeutet werden.

JavaScript stellt ab Version 1.1 den Objekt-Konstruktor Image() zur Verfügung: Mit der Anweisung new Image() läßt sich ein Image-Objekt erzeugen, das zunächst nicht sichtbar ist. Indem man dessen Eigenschaft src einen Wert zuweist, werden die Bilddaten geladen.

var neues_bild = new Image(); // Image-Objekt erzeugen
neues_bild.src = "bild2.gif"; // zweites Bild laden

Dieses zweite Bild steht nun zur Verfügung. Zu einem späteren Zeitpunkt - etwa durch ein Ereignis aktiviert - kann dieses Bild das erste Bild ersetzen:

document.testbild.src = neues_bild.src;

Die SRC-Eigenschaft des Bildes "testbild" erhält also einfach einen neuen Wert zugewiesen. Wichtig ist dabei, daß dies der Wert aus dem bereits geladenen Objekt "neues_bild" ist.

Seitenanfang

Bilder ändern, sobald die Maus darüber ist

Zwar sieht HTML 4.0 die Eventhandler onMouseOver und onMouseOut für das IMG-Element vor, jedoch wurde dies bis zur Version 4.x im Netscape Navigator noch nicht implementiert. Daher muß das Bild innerhalb eines Links <A HREF=...>...</A> definiert werden. Dieses Element besitzt ab NN 3.0 die Event-Handler onMouseOver und onMouseOut, die auf die Maus reagieren.

Beispiel:

altes_bild = new Image();
altes_bild.src = "bild1.gif";
neues_bild = new Image();
neues_bild.src = "bild2.gif";

<a onMouseOver="self.document.testbild.src=neues_bild.src"
   onMouseOut="self.document.testbild.src=altes_bild.src"
   href="#">
<img border="0" src="bild1.gif" name="testbild"></a>

Ausprobieren:

Seitenanfang

Bilder in anderen Frames/Fenstern ändern

Auf gleiche Weise kann man auch ein anderes als das in den Link eingeschlossene Bild ersetzen. Betrachten wir noch einmal einen Eventhandler aus dem obigen Beispiel:

  onMouseOver="self.document.testbild.src=neues_bild.src"

Hier bezeichnet self das Fenster, in dem sich das zu ändernde Bild befindet. Was an dieser Stelle stehen muss, wenn das auszutauschende Bild in einem anderen Fenster oder Frame steht, wird im FAQ-Abschnitt "Mehr Fenster und Frames - Kommunikation zwischen..." im einzelnen beschrieben. Die Angabe testbild bezeichnet den Namen des auszutauschenden Bildes und muß natürlich gegebenenfalls angepasst werden.

Beispiel:

Der Button unten öffnet ein Fenster, das zwei Frames namens frame1 und frame2 enthält. Das Dokument in frame2 enthält folgendes IMG-Element:

<img border="0" src="bild.gif" name="anderesbild">

Soll beim Überfahren eines Bildes in frame1 nun dieses Bild geändert werden, muß man in frame1 einen Eventhandler wie folgt definieren:

   onMouseOver="parent.frame2.document.anderesbild.src=bild2.src"

Ausprobieren:

Seitenanfang

Fehlerquellen, Browserspezifisches

if (document.images) {
  var bild1 = new Image();
  bild1.src = 'normal.gif';
  var bild2 = new Image();
  bild2.src = 'hilite.gif';
}
function wechsel(imgName, newSrc) {
  if (document.images) document.images[imgName].src = newSrc;
}
top

Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/. Der Text der Seite wurde erstellt von Stefan Mintert (©) und zuletzt bearbeitet von Dietmar Meier.

 ______ letzte Änderung: 12/2012 ______ 

 
© S. Mintert, Ch. Kühnel