SELFHTML: JavaScript / Objektreferenz / images
Description: (SELFHTML 7.0) Das JavaScript-Objekt images
Keywords: SELFHTML, JavaScript, Objekt, images-Objekt

SELFHTML/Quickbar JavaScript Objektreferenz

| ## images
| images: Allgemeines zur Verwendung Eigenschaften: border (Rahmen) complete (Ladezustand) height (Höhe) hspace (horizontaler Abstand) length (Anzahl Grafiken) lowsrc (Vorschaugrafik) name (Name) src (Grafikdatei) vspace (vertikaler Abstand) width (Breite) Methoden: handleEvent() (Ereignis verarbeiten)

## images: Allgemeines zur Verwendung

Mit dem Objekt `images`, das in der JavaScript-Objekthierarchie unterhalb des document-Objekts liegt, haben Sie Zugriff auf alle Grafiken, die in einer HTML-Datei definiert sind. Dabei können Sie auch vorhandene Grafiken dynamisch durch andere ersetzen.

Ein neues Grafik-Objekt wird automatisch erzeugt, wenn der WWW-Browser eine Grafik in der HTML-Datei vorfindet.

Es stehen folgende Arten zur Verfügung, mit JavaScript eine bestimmte Grafik anzusprechen:

### Schema 1 / Beispiel 1:

    document.images[#].Eigenschaft
    document.images[#].Methode()

    Hoehe = document.images[0].height;

### Schema 2 / Beispiel 2:

    document.BildName.Eigenschaft
    document.BildName.Methode()

    Hoehe = document.Portrait.height;

### Erläuterung:

Grafikobjekte können Sie auf zwei Arten ansprechen:

- mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
  Bei Verwendung von Indexnummern geben Sie `document.images` an und dahinter in eckigen Klammern, die wievielte Grafik in der Datei Sie meinen. Jede Grafik, die in HTML mit dem `<img>`-Tag notiert wurde, zählt. 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 `<img>`-Tags in der Datei notiert sind.
- mit dem Namen der Grafik (wie in Schema 2 / Beispiel 2)
  Dabei geben Sie mit `document.BildName` den Namen an, den Sie bei der Definition der Grafik im einleitenden `<img>`-Tag im Attribut `name=` angegeben haben.

Für Grafiken, die Sie nachträglich mit JavaScript anzeigen möchten, müssen Sie jedoch eigene neue Grafikobjekte in JavaScript erzeugen. Das ist besonders dann wichtig, wenn Sie Grafiken dynamisch durch andere Grafiken ersetzen wollen.

### Beispiel:

    Zweitbild = new Image();
    Zweitbild.src = "blau.gif";
    document.images[0].src = Zweitbild.src;;

### Erläuterung:

Ein neues Grafik-Objekt 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()` (erster Buchstabe großgeschrieben!).

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 dynamisch austauschbarer Grafiken finden Sie in diesem Dokument: Dynamische grafische Buttons.

## border

Speichert die Angabe zum Rahmen um eine Grafik, wie sie mit der Angabe `border=` im `<img>`-Tag möglich ist. Netscape speichert auch dann einen Wert, wenn die Angabe im HTML-Tag fehlt. Der MS Internet Explorer speichert nur dann einen Wert, wenn im HTML-Tag ein Wert angegeben ist.

### Beispiel:

    <html><head><title>Test</title>
    </head><body>
    <a href="javascript:alert(document.Anna.border)">
    <img src="anna.jpg" border=3 name="Anna">
    </a>
    </body></html>

### Erläuterung:

Das Beispiel enthält eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit alert() der Wert ausgegeben, der in der Angabe `border=` gespeichert ist.

## complete

Speichert, ob eine Grafik vollständig geladen ist oder nicht. Enthält den Wert `true`, wenn die Grafik geladen ist, und den Wert `false`, wenn die Grafik nicht oder nicht vollständig geladen ist.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
    function BildCheck()
    {
     var Status = "";
     for(i = 0; i < document.images.length; ++i)
     {
      if(document.images[i].complete == true)
       Status = Status + "Grafik " + (i+1) + " geladen\n";
      else
       Status = Status + "Grafik " + (i+1) + " nicht geladen\n";
     }
     Status = Status + document.images.length + " Grafiken im Dokument";
     alert(Status);
    }
    </script>
    </head><body>
    <img src="berthold.gif"><br>
    <img src="boris.jpg"><br>
    <img src="bernd.gif"><br>
    <a href="javascript:BildCheck()">Grafiken checken</a>
    </body></html>

### Erläuterung:

Das Beispiel enthält mehrere Grafiken und einen Verweis. Beim Anklicken des Verweises wird die Funktion `BildCheck()` aufgerufen, die im Dateikopf in einem Scriptbereich definiert ist. Diese Funktion ermittelt in einer for-Schleife für jede einzelne Grafik in der Datei (ermittelbar mit `document.images.length`), ob diese geladen ist (`if(document.images[i].complete == true)`) oder nicht. Das Ergebnis wird in einer Variablen `Status` gesammelt. Am Ende wird der Inhalt von `Status` mit alert() ausgegeben.

## height

Speichert die Angabe zur Höhe eine Grafik, wie sie mit der Angabe `height=` im `<img>`-Tag möglich ist. Es wird auch dann ein Wert gespeichert, wenn die Angabe im HTML-Tag fehlt.

### Beispiel:

    <html><head><title>Test</title>
    </head><body>
    <img src="christa.gif" name="Christa">
    <script language="JavaScript">
    document.write(document.Christa.name + "<br>");
    document.write(document.Christa.width + " x " + document.Christa.height + " Pixel");
    </script>
    </body></html>

### Erläuterung:

Das Beispiel enthält eine Grafik. Unterhalb davon ist ein Scriptbereich notiert. Darin wird mit document.write() der Bildname und die Angaben zu Breite und Höhe der Grafik geschrieben.

## hspace

Speichert die Angabe zum horizontalen Abstand zwischen einer Grafik und ihren nebenliegenden Elementen, wie sie mit der Angabe `hspace=` im `<img>`-Tag möglich ist. Wenn die Angabe im HTML-Tag fehlt, hat die Objekteigenschaft `hspace` den Wert 0.

### Beispiel:

    <html><head><title>Test</title>
    </head><body>
    <a href="javascript:alert(document.Dorian.hspace)">
    <img src="dorian.jpg" hspace=30 name="Dorian">
    </a>
    </body></html>

### Erläuterung:

Das Beispiel enthält eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit alert() der Wert ausgegeben, der in der Angabe `hspace=` gespeichert ist.

## length

Speichert die Anzahl der Grafiken in einer Datei.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
    </script>
    </head><body>
    <img src="emma.jpg"><br>
    <img src="elke.gif"><br>
    <img src="ellen.jpg"><br>
    <script language="JavaScript">
    document.write("<hr>Seite enthält " + document.images.length + " Grafiken");
    </script>
    </body></html>

### Erläuterung:

Das Beispiel enthält mehrere Grafiken. Am Ende steht ein Scriptbereich. Darin wird mit document.write() die Anzahl der Grafiken in die Datei geschrieben.

## lowsrc

Speichert die Angabe zur Vorab-Grafik, wie sie mit der Angabe `lowsrc=` im `<img>`-Tag möglich ist. Wenn die Angabe im HTML-Tag fehlt, enthält die Objekteigenschaft `hspace` keinen Wert. Wenn eine Angabe zu `lowsrc=` vorhanden ist, enthält die Objekteigenschaft bei Netscape die vollständige URL-Adresse, beim MS Internet Explorer genau die Angabe, die in der HTML-Angabe steht.

### Beispiel:

    <html><head><title>Test</title>
    </head><body>
    <a href="javascript:alert(document.images[0].hspace)">
    <img src="franz.jpg" lowsrc="fraenzchen.jpg">
    </a>
    </body></html>

### Erläuterung:

Das Beispiel enthält eine Grafik, die mit `lowsrc=` eine vorab anzuzeigende Grafik definiert, und die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit alert() der Wert ausgegeben, der in der Angabe `lowsrc=` gespeichert ist.

## name

Speichert den Namen einer Grafik, wie er mit der Angabe `name=` im `<img>`-Tag möglich ist. Wenn die Angabe im HTML-Tag fehlt, enthält die Objekteigenschaft `name` keinen Wert.

### Beispiel:

    <html><head><title>Test</title>
    </head><body>
    <img src="gabi.gif" width=400 height=300 name="Gabi">
    <script language="JavaScript">
      document.write("<br>" + document.images[0].name);
    </script>
    </body></html>

### Erläuterung:

Das Beispiel enthält eine Grafik. Unterhalb davon ist ein Scriptbereich notiert. Darin wird mit document.write() der Bildname der Grafik in die Datei geschrieben.

## src

Speichert die Angabe, welche Grafikdatei angezeigt wird, wie sie mit der Angabe `src=` im `<img>`-Tag möglich ist. Diese Eigenschaft läßt sich ändern. Dadurch können Sie Grafiken dynamisch durch andere ersetzen. Beachten Sie jedoch, daß Breite und Höhe ursprünglich in HTML notierten Grafik für alle dynamisch folgenden Grafiken übernommen werden. Um verzerrungsfreie Effekte zu erzielen, sollten also alle Grafiken, die einander dynamisch ersetzen, die gleiche Höhe und Breite haben.

### Beispiel:

    <html><head><title>Test</title>
    </head><body>
    <img src="hans.gif" width=400 height=300>
    <script language="JavaScript">
     var b = new Array();
     b[0] = new Image(); b[0].src = "holger.gif";
     b[1] = new Image(); b[1].src = "hilmar.gif";
     b[2] = new Image(); b[2].src = "heiner.gif";
     b[3] = new Image(); b[2].src = "hans.gif";
     var i = 0;
     function Animation()
     {
      if(i > 3) i = 0;
      document.images[0].src = b[i].src;
      i = i + 1;
      window.setTimeout("Animation()",1000);
     }
     window.setTimeout("Animation()",1000);
    </script>
    </body></html>

### Erläuterung:

Das Beispiel enthält eine Grafik namens `ingo.gif`. Unterhalb davon ist ein Scriptbereich notiert, der dafür sorgt, daß die Grafik sich automatisch jede Sekunde in eine andere Grafik verwandelt. Dazu wird zunächst ein Array namens `b` notiert. Danach werden vier Elemente des Arrays `b` bestimmt. In allen vier Fällen handelt es sich um neue Grafikobjekte. Jedem der neuen Grafikobjekte wird mit der Eigenschaft `src` eine Grafikdatei zugewiesen. Beachten Sie, daß auch die Datei `hans.gif` wieder dabei ist, obwohl diese bereits angezeigt wird. Da sie in die Animation integriert werden soll, muß für sie aber trotzdem noch mal ein eigenes neues Grafikobjekt erzeugt werden.

Innerhalb der Funktion `Animation()`, die unterhalb der Funktion zum eersten Mal aufgerufen wird. wird das jeweils aktuelle Bild durch ein anderes ersetzt. Das geschieht durch Zuweisng von `b[i].src` an `document.images[0].src`. Da `b[i]` abhängig von der Variablen `i` ist, die bei jedem Funktionsaufruf verändert wird, wird jedes mal ein anderes der vier Bilder angezeigt. Am Ende ruft sich die Funktion `Animation()` selbst wieder auf. So entsteht der Endlos-Effekt. Der Aufruf ist in einen setTimeout()-Aufruf eingebunden, der den nächsten Aufruf jeweils um 1000 Millisekunden, also um eine Sekunde, verzögert.

## vspace

Speichert die Angabe zum vertikalen Abstand zwischen einer Grafik und den Elementen oberhalb und unterhalb davon, wie sie mit der Angabe `vspace=` im `<img>`-Tag möglich ist. Wenn die Angabe im HTML-Tag fehlt, hat die Objekteigenschaft `vspace` den Wert 0.

### Beispiel:

    <html><head><title>Test</title>
    </head><body>
    <a href="javascript:alert(document.Ina.vspace)">
    <img src="ina.jpg" vspace=8 name="Ina">
    </a>
    </body></html>

### Erläuterung:

Das Beispiel enthält eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit alert() der Wert ausgegeben, der in der Angabe `vspace=` gespeichert ist.

## width

Speichert die Angabe zur Breite eine Grafik, wie sie mit der Angabe `width=` im `<img>`-Tag möglich ist. Es wird auch dann ein Wert gespeichert, wenn die Angabe im HTML-Tag fehlt.

### Beispiel:

    <html><head><title>Test</title>
    </head><body>
    <img src="jochen.jpg" name="Jochen">
    <script language="JavaScript">
    document.write(document.Jochen.name + "<br>");
    document.write(document.Jochen.width + " x " + document.Jochen.height + " Pixel");
    </script>
    </body></html>

### Erläuterung:

Das Beispiel enthält eine Grafik. Unterhalb davon ist ein Scriptbereich notiert. Darin wird mit document.write() der Bildname und die Angaben zu Breite und Höhe der Grafik geschrieben.

## handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie handleEvent() beim window-Objekt (nähere Informationen siehe dort).

weiter: | layers
zurück: | options

SELFHTML/Quickbar JavaScript Objekt-Referenz

© 1998 Stefan Münz, muenz@csi.com