|
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.
Bilder vorladen
Bilder ändern, sobald die Maus darüber ist
Bilder in anderen Frames/Fenstern ändern
Fehlerquellen, Browserspezifisches
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.
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:
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:
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; }
Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/.
Dieser Text wurde erstellt von Stefan Mintert (©) und zuletzt bearbeitet von Dietmar Meier.
© S. Mintert, Ch. Kühnel
______ letzte Änderung: 01.01.2002 ______
Original-URL dieser Datei: http://dcljs.de/faq/antwort.php?Antwort=bilder_vorladen