JavaScript - Objektreferenz - document - images
1. Das Objekt
Mit images
habt ihr direkten Zugriff auf alle Bilder einer Seite, die mit dem <img>
-Tag
eingebunden sind. Es gibt dabei drei Möglichkeiten, diese Grafiken anzusprechen.
- über einen numerischen Index
- über den Namen der Grafik
- über den Namen der Grafik als Index
Numerischer Index
JavaScript nummeriert alle Bilder einfach durch, angefangen bei Null. Hütet euch aber davor, diese Möglichkeit zu nutzen. Da verliert man sehr schnell die Übersicht. Es sei denn, ihr wollt alle auf einmal ansteuern.
document.images[0]
document.images[10]
Namen
document.images.bildname
Namen als Index
document.images['bildname']
2. Eigenschaften
width
, height
Gibt die Breite und Höhe des Bildes zurück, die im img
-Tag notiert wurde. Gibt es dort keine Angaben, liefern einige
Browser nur eine Null.
<img src="pics/blubb.gif" name="bla" width="100" height="50">
...
alert (document.images['bla'].width);
length
Liefert die Anzahl der Bilder in einer Seite.
<img src="pics/blubb.gif">
<img src="pics/blubber.gif">
<img src="pics/bla.gif">
...
alert (document.images.length);
src
Wenn ihr mich fragt, die einzig wirklich sinnvolle Eigenschaft dieses Objektes, denn damit kann man Bilder austauschen, also zum Beispiel die berühmten RollOver-Effekte bei Buttons, die Bilder sind.
var rein = new Array();
var raus = new Array();
raus['blubb'] = new Image();
raus['blubb'].src = "pics/blubb_b.gif";
rein['blubb'] = new Image();
rein['blubb'].src = "pics/blubb_o.gif";
function Raus (button)
{
document.images[button].src = raus[button].src
}
function Rein (button)
{
document.images[button].src = rein[button].src
}
...
<a href="irgendwas.htm"
onMouseOver = "Rein('blubb');"
onMouseOut = "Raus('blubb');">
<img src="pics/blubb_b.gif" name="blubb">
</a>
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt