FENSTERNAME.document.images[ ] / BILDNAME
Allgemeines zur Verwendung
Eigenschaften
Methoden
Allgemeines zur Verwendung
Mit dem Objekt FENSTERNAME.document.images[ ] / BILDNAME haben Sie Zugriff auf alle Grafiken,
die in eine HTML-Datei eingebunden sind. Dabei können Sie auch vorhandene Grafiken dynamisch durch andere ersetzen.
Eine Objektinstanz des Grafik-Objekts wird automatisch erzeugt, wenn der WWW-Browser mindestens eine 
Grafik in der HTML-Datei vorfindet. Daneben können Sie für dynamisch einzubindende Grafiken selbst neue Instanzen des Grafik-Objekts definieren.
Vorhandene Grafiken ansprechen
Sie können Grafiken, die mit HTML eingebunden sind, mit JavaScript ansprechen.
Schema 1 / Beispiel 1:
FENSTERNAME.document.images[#].Eigenschaft/Methode()
var Grafikdatei = window.document.images[4].src;
|
Schema 2 / Beispiel 2:
FENSTERNAME.document.BILDNAME.Eigenschaft/Methode()
var Grafikdatei = window.document.HomeButton.src;
|
Erläuterung:
In eine HTML-Datei eingebundene Grafik können Sie auf zwei Arten ansprechen:
- mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
Bei Verwendung von Indexnummern geben Sie images an und dahinter in eckigen Klammern, die wievielte Grafik innerhalb der HTML-Datei Sie meinen. Beachten Sie, daß der Zähler bei 0 beginnt, d.h. die erste Grafik sprechen Sie mit images[0] an, die zweite Grafik mit images[1] usw. Beim Zählen gilt die Reihenfolge, in der die Grafiken in der HTML-Datei eingebunden sind.
- mit dem Namen der Grafik (wie in Schema 2 / Beispiel 2)
Dabei geben Sie den Namen an, der beim 
Referenzieren der Grafik in der Zusatzangabe name= definiert worden ist.
Beachten Sie:
Zu den Fensternamen lesen Sie den Abschnitt Allgemeines zur Verwendung des window-Objekts. Bei Verwendung von Frames lesen Sie auch den Abschnitt Allgemeines zur Verwendung des Frame-Objekts.
Neue Objektinstanz erzeugen / Grafik dynamisch einbinden
Sie können neue Instanzen des Grafik-Objekts definieren. Mit deren Hilfe können Sie Grafiken mit JavaScript anzeigen, die zuvor noch nicht in der HTML-Datei referenziert waren.
Beispiel:
Zweitbild = new Image();
Zweitbild.src = "blau.gif";
document.images[0].src = Zweitbild.src;;
|
Erläuterung:
Eine neue Instanz des Grafik-Objekts speichern Sie in einem selbst vergebenen Objektnamen, im obigen Beispiel in dem Namen Zweitbild. Hinter dem Namen folgt ein Istgleichzeichen. Dahinter folgt das reservierte Wort new und der Aufruf der Objektfunktion Image().
Anschließend können Sie mit der neu erzeugten Instanz arbeiten. So können Sie der Instanz über die Objekteigenschaft src eine Grafikdatei zuordnen, im Beispiel die Datei "blau.gif". Die dritte Zeile im obigen Beispiel zeigt eine Anweisung, wie Sie dynamisch eine vorhandene Grafik ersetzen können. Angenommen, in der HTML-Datei wurde als erste Grafik in der Datei mit <img src="rot.gif"> ein rotes Bild eingebunden. Mit Hilfe von JavaScript können Sie nun, beispielsweise in Abhängigkeit vom Klicken auf einen Verweis, dieses rote Bild durch ein anderes, blaues Bild ersetzen.
Beachten Sie:
Ein Anwendungsbeispiel für den Einsatz dynamischer Grafiken finden Sie in diesem Dokument: dynamische grafische Buttons.
Eigenschaften
Eigenschaften von Grafiken, die in HTML referenziert wurden, können Sie nur lesen, nicht ändern. Eine Anweisung wie window.document.images[0]="blau.gif" ist falsch. Sie können Eigenschaften von HTML-definierten Grafiken allerdings gleichartige Eigenschaften von eigenen Grafikobjekten zuweisen. Eine Anweisung wie window.document.images[0].src=Neubild.src ist also erlaubt, wenn zuvor eine neue Objektinstanz Neubild erzeugt wurde.
Eigenschaften einer neuen Instanz des Grafik-Objekts können Sie jederzeit ändern.
FENSTERNAME.document.images[#].border
FENSTERNAME.document.BILDNAME.border
Der Rahmen um eine Grafik. Mit var Rahmen = window.document.images[3].border beispielsweise speichern Sie die Dicke des definierten Rahmens um eine Grafik in einer Variablen.
FENSTERNAME.document.images[#].complete
FENSTERNAME.document.BILDNAME.complete
Gibt an, ob eine Grafik vollständig eingelesen ist oder nicht. Mit alert("Zustand von Grafik 1: " + window.document.images[0].complete) können Sie beispielsweise in einem Meldungsfenster ausgeben, ob eine Grafik vollständig geladen ist oder nicht.
FENSTERNAME.document.images[#].height
FENSTERNAME.document.BILDNAME.height
Die Höhe einer Grafik. Mit var Hoehe = window.document.images[1].height beispielsweise speichern Sie die in der zweiten Grafik definierte Höhe in einer Variablen.
FENSTERNAME.document.images[#].hspace
FENSTERNAME.document.BILDNAME.hspace
Der horizontale Abstand einer Grafik zu ihrer Umgebung. Mit var HAbstand = window.document.images[0].hspace beispielsweise speichern Sie den in der ersten Grafik definierten horizontalen Abstand in einer Variablen.
FENSTERNAME.document.images.length
Ermittelt die Anzahl in einer HTML-Datei referenzierten Grafiken. Mit alert("Diese Datei enthält isg. " + window.document.images.length + " Grafiken") geben Sie beispielsweise die Anzahl der referenzierten Grafiken in einem Meldungsfenster aus.
FENSTERNAME.document.images[#].lowsrc
FENSTERNAME.document.BILDNAME.lowsrc
Die niedriger auflösende Grafikdatei bei Grafiken in zwei Versionen. Mit var Schlechtbild = window.document.images[3].lowsrc beispielsweise speichern Sie die Angabe zu der in der vierten Grafik mit lowsrc= definierten Datei in einer Variablen.
FENSTERNAME.document.images[#].name
FENSTERNAME.document.BILDNAME.name
Der Name einer Grafik. Mit var Bildname = window.document.images[2].name beispielsweise speichern den vergebenen Namen der dritten Grafik mit lowsrc= definierten Datei in einer Variablen.
FENSTERNAME.document.images[#].prototype
FENSTERNAME.document.BILDNAME.prototype
Erlaubt die Definition eigener Eigenschaften für eine Grafik. Ein Beispiel war leider nicht auftreibbar.
FENSTERNAME.document.images[#].src
FENSTERNAME.document.BILDNAME.src
Die Angabe zur Grafikdatei. Mit var Grafik = window.document.images[0].src beispielsweise speichern den Namen der ersten im der Datei referenzierten Grafikdatei in einer Variablen.
FENSTERNAME.document.images[#].vspace
FENSTERNAME.document.BILDNAME.vspace
Der vertikale Abstand einer Grafik zu ihrer Umgebung. Mit var VAbstand = window.document.images[0].height beispielsweise speichern Sie den in der ersten Grafik definierten vertikalen Abstand in einer Variablen.
FENSTERNAME.document.images[#].width
FENSTERNAME.document.BILDNAME.width
Die Breite einer Grafik. Mit var Breite = window.document.images[1].width beispielsweise speichern Sie die in der zweiten Grafik definierte Breite in einer Variablen.
Methoden
FENSTERNAME.document.images[ ] / BILDNAME hat keine eigenen Methoden.
© 1997 
Stefan Münz, s.muenz@euromail.com
