Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

images

Informationsseite

nach unten images: Allgemeines zur Verwendung

Eigenschaften:

nach unten border (Rahmen)
nach unten complete (Ladezustand)
nach unten height (Höhe)
nach unten hspace (horizontaler Abstand)
nach unten length (Anzahl Grafiken)
nach unten lowsrc (Vorschaugrafik)
nach unten name (Name)
nach unten src (Grafikdatei)
nach unten vspace (vertikaler Abstand)
nach unten width (Breite)

Methode:

nach unten handleEvent() (Ereignis verarbeiten)

 nach unten 

images: Allgemeines zur Verwendung

Mit dem Objekt images, das in der JavaScript-Objekthierarchie unterhalb des Seite document-Objekts liegt, haben Sie Zugriff auf alle Seite 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 Web-Browser eine Kapitel 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.images.Bildname.Eigenschaft
document.images.Bildname.Methode()

Hoehe = document.images["Portrait"].height;

Schema 3 / Beispiel 3:

document.images["Bildname"].Eigenschaft
document.images["Bildname"].Methode()

Hoehe = document.images["Portrait"].height;

Schema 4 / Beispiel 4:

document.Bildname.Eigenschaft
document.Bildname.Methode()

Hoehe = document.Portrait.height;

Erläuterung:

Grafikobjekte können Sie auf zwei Arten ansprechen:

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:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
Zweitbild = new Image(104, 102);
Zweitbild.src = "christa.gif";
function Bildwechsel () {
  document.images[0].src = Zweitbild.src;
}
</script>
</head><body>
<p>
<a href="javascript:alert(Zweitbild.src)">Bildquelle ausgeben</a><br>
<a href="javascript:alert(Zweitbild.height)">Bildhöhe ausgeben</a><br>
<a href="javascript:alert(Zweitbild.width)">Bildbreite ausgeben</a>
</p>
<p>
<img src="boris.gif" alt="Boris"><br>
<a href="javascript:Bildwechsel()">Bild auswechseln</a>
</p>
</body></html>

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 Gleichheitszeichen. 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 die Adresse einer Grafik zuordnen, im Beispiel die Datei christa.gif. Mit dieser Zuordnung lädt der Browser die Grafikdatei. Wenn die Datei auf einem WWW-Server liegt, kann die Übertragung je nach Größe der Grafikdatei einige Zeit dauert. Da das Script derweil weiterläuft, können Sie nicht sofort mit der Grafik arbeiten. Ob die Grafik bereits fertig geladen ist, können Sie über die Eigenschaft nach unten complete abfragen.

Die Funktion Bildwechsel im obigen Beispiel zeigt eine Anweisung, wie Sie dynamisch eine vorhandene Grafik ersetzen können. Als erste Grafik in der HTML-Datei wurde boris.gif eingebunden. Mit Hilfe der Eigenschaft nach unten src wird diese Grafik beim Klicken auf den Verweis durch christa.gif ersetzt.

Die Objektfunktion Image() kennt zwei optionale Parameter:
1. width Breite des Bildes
2. height Höhe des Bildes
Diese Parameter können Sie beim Erzeugen des Image-Objektes mit angeben. Zur Demonstration wird im Beispiel die Höhe und die Breite der Grafik mit ausgegeben.
Netscape 6.1 und Opera 5.12 interpretieren diese optionalen Parameter nicht und speichern jeweils den Wert 0 für die Höhe und Breite der Grafik.

Beachten Sie:

Ein Anwendungsbeispiel für den Einsatz dynamisch austauschbarer Grafiken finden Sie in diesem Dokument: Seite Dynamische grafische Buttons.

Gemäß dem HTML-spezifischen DOM greift z.B. document.images.bildname auf das img-Elementobjekt zu, mit der die Grafik eingebunden ist. Neben den hier beschriebenen Eigenschaften und Methoden können Sie auf diese Art weitere Eigenschaften und Methoden nutzen, die in der Referenz zum Seite img-Elementobjekt aufgelistet sind.

nach obennach unten

JavaScript 1.1Netscape 3.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern border

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.Anna.border)">
<img src="anna.jpg" border="3" alt="Anna" 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 Seite alert() der Wert ausgegeben, der im Attribut border angegeben ist.

Beachten Sie:

Im Netscape 6.1 ist diese Angabe fehlerhaft und enthält als Rückgabewert -1.
Das Ändern der Eigenschaft border ist bislang nur im Internet Explorer möglich. Im Netscape 6.1 wird der bestehende Rahmen bei einer Änderung entfernt.

nach obennach unten

JavaScript 1.1Netscape 3.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Lesen complete

Speichert gemäß Netscapes JavaScript, ob der Versuch, eine Grafik zu laden, abgeschlossen wurde. Enthält den Wert true, wenn der Versuch abgeschlossen wurde, und den Wert false, wenn gerade versucht wird, die Grafik zu laden.die Grafik nicht oder nicht vollständig geladen ist. Speichert gemäß Microsofts JScript, ob eine Grafik vollständig geladen ist oder nicht. Enthält den Wert true, wenn die Grafik fertig geladen ist, und den Wert false, wenn die Grafik nicht oder nicht vollständig geladen ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/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" alt="Berthold"><br>
<img src="boris.gif" alt="Boris"><br>
<img src="bernd.gif" alt="Bernd"><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 Script-Bereich 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 Seite alert() ausgegeben.

Beachten Sie:

Die Eigenschaft complete wird von den Browsern unterschiedlich interpretiert, je nachdem, ob sie der Definition von Netscape oder Microsoft folgen. Netscape ab Version 6, Mozilla Firefox und Konqueror folgen der Netscape-Definition. Obwohl im vorliegenden Beispiel zwei Grafiken nicht geladen werden können, hat die Eigenschaft complete für alle Grafiken den Wert true. Die älteren Netscape-Browser bis zur Version 4 geben für alle Grafiken den Wert false an. Der Internet Explorer und Opera folgen der Microsoft-Definition: Die korrekt geladene Grafik hat den complete-Wert true, die anderen beiden nicht vorhandenen Grafiken den Wert false.

nach obennach unten

JavaScript 1.1Netscape 3.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern height

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img src="christa.gif" name="Christa" alt="Christa">
<script type="text/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 Script-Bereich notiert. Darin wird mit Seite document.write() der Bildname und die Angaben zu Breite und Höhe der Grafik geschrieben.

Beachten Sie:

Im Netscape 6.1, Safari und in Konqueror wird in der Eigenschaft height der Wert 0 gespeichert, wenn das height-Attribut im HTML-Tag fehlt.
Das Ändern der Eigenschaft height ist bislang nur im Internet Explorer und im Netscape 6.1 möglich.

nach obennach unten

JavaScript 1.1Netscape 3.0MS IE 4.0Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern hspace

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

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

Erläuterung:

Das Beispiel enthält eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit Seite alert() der Wert ausgegeben, der im Attribut hspace angegeben ist.

Beachten Sie:

Netscape 6.1 und Opera 5.12 interpretieren diese Angabe fehlerhaft. Im Netscape 6.1 ist stets -1 und in Opera 5.12 0 gespeichert.
Das Ändern der Eigenschaft hspace ist bislang nur im Internet Explorer möglich. Im Netscape 6.1 wird der horizontale Abstand entfernt.

nach obennach unten

JavaScript 1.1Netscape 3.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen length

Speichert die Anzahl der Grafiken in einer Datei.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img src="anna.jpg" alt="Anna"><br>
<img src="dorian.gif" alt="Dorian"><br>
<img src="christa.gif" alt="Christa"><br>
<script type="text/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 Script-Bereich. Darin wird mit Seite document.write() die Anzahl der Grafiken in die Datei geschrieben.

nach obennach unten

JavaScript 1.1Netscape 3.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen lowsrc

Speichert die Angabe zur Vorabgrafik, wie sie mit dem Attribut lowsrc im <img>-Tag möglich ist. Wenn die Angabe im HTML-Tag fehlt, enthält die Objekteigenschaft lowsrc keinen Wert. Wenn ein lowsrc-Attribut angegeben ist, enthält die Objekteigenschaft bei Netscape der vollständige URI, beim Internet Explorer, Netscape 6 und Opera dagegen genau die Angabe, die in der Wertzuweisung an das HTML-Attribut steht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.images[0].lowsrc)">
<img src="xanta.jpg" lowsrc="xantalow.jpg" alt="Fr&auml;aenzschen und Franz">
</a>
</body></html>

Erläuterung:

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

nach obennach unten

JavaScript 1.1Netscape 3.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen name

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img name="Anna" src="anna.jpg" width="271" height="265" border="0" alt="">
<script type="text/javascript">
document.write("<br>" + document.images[0].name);
</script>
</body></html>

Erläuterung:

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

Beachten Sie:

Im Netscape 6.1 können Sie die Eigenschaft name auch ändern.

nach obennach unten

JavaScript 1.1Netscape 3.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern src

Speichert die Angabe, welche Grafikdatei angezeigt wird, wie sie mit dem Attribut src im <img>-Tag möglich ist. Diese Eigenschaft lässt sich ändern. Dadurch können Sie Grafiken dynamisch durch andere ersetzen. Beachten Sie jedoch, dass 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:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img src="hans.gif" width="400" height="300" alt="Hans">
<script type="text/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[3].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 hans.gif. Unterhalb davon ist ein Script-Bereich notiert, der dafür sorgt, dass die Grafik sich automatisch jede Sekunde in eine andere Grafik verwandelt. Dazu wird zunächst ein Seite 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, dass auch die Datei hans.gif wieder dabei ist, obwohl diese bereits angezeigt wird. Da sie in die Animation integriert werden soll, muss für sie aber trotzdem noch mal ein eigenes neues Grafikobjekt erzeugt werden.

Innerhalb der Funktion Animation(), die unterhalb der Funktion zum ersten Mal aufgerufen wird. wird das jeweils aktuelle Bild durch ein anderes ersetzt. Das geschieht durch Zuweisung 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 Seite setTimeout()-Aufruf eingebunden, der den nächsten Aufruf jeweils um 1000 Millisekunden, also um eine Sekunde, verzögert.

Beachten Sie:

Im Internet Explorer und im Netscape 6 können Sie auch unterschiedlich große Grafiken verwenden. In diesem Fall sollten Sie die Angaben zur Größe der Grafik weglassen bzw. für die Höhe die Eigenschaft nach oben height und für die Weite die Eigenschaft nach unten width dynamisch ändern.

nach obennach unten

JavaScript 1.1Netscape 3.0MS IE 4.0Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern vspace

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

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

Erläuterung:

Das Beispiel enthält eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit Seite alert() der Wert ausgegeben, der im Attribut vspace notiert ist.

Beachten Sie:

Netscape 6.1 und Opera 5.12 interpretieren diese Angabe fehlerhaft. Im Netscape 6.1 ist stets -1 und in Opera 5.12 0 gespeichert.
Das Ändern der Eigenschaft vspace ist bislang nur im Internet Explorer möglich. Im Netscape 6.1 wird der vertikale Abstand entfernt.

nach obennach unten

JavaScript 1.1Netscape 3.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.3Safari 1.0Lesen/Ändern width

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img src="christa.jpg" name="Christa" alt="Christa">
<script type="text/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 Script-Bereich notiert. Darin wird mit Seite document.write() der Bildname und die Angaben zu Breite und Höhe der Grafik geschrieben.

Beachten Sie:

Im Netscape 6.1 und Konqueror 3.1 wird in der Eigenschaft width der Wert 0 gespeichert, wenn diese Angabe im HTML-Tag fehlt. Konqueror 3.4 zeigt diese Einschränkung nicht mehr.
Das Ändern der Eigenschaft width ist bislang nur im Internet Explorer und im Netscape 6.1 möglich.

nach obennach unten

JavaScript 1.2Netscape 4.0 handleEvent()

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

 nach oben
weiter Seite embeds
zurück Seite options
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/javascript/objekte/images.htm