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