JavaScript/DOM/Document/images

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit dem Objekt images haben Sie Zugriff auf alle Grafiken, die in einer HTML-Datei definiert sind. Dabei können Sie auch vorhandene Grafiken dynamisch durch andere ersetzen.


obsolete Eigenschaften

  • align
  • border
  • hspace
  • longdesc
  • name
  • vspace

Inhaltsverzeichnis

[Bearbeiten] Verwendung

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

[Bearbeiten] Ein Image Objekt aufrufen

Sie können ein <img> Element durch die Methode getElementById() aufrufen:


Beispiel
var x = document.getElementById("myImg");

[Bearbeiten] Ein Image Objekt erzeugen

Sie können ein <img> Element durch die Methode createElement() aufrufen:


Beispiel
var x = document.createElement("IMG");


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


Beispiel
// 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;

[Bearbeiten] Imageobjekte 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, 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 wird die Grafik als Unterobjekt von document.images angesprochen. Notieren Sie document.images, dahinter einen Punkt zum Ansprechen des Unterobjekts und schließlich den Namen, den Sie bei der Definition der Grafik im einleitenden <img>-Tag im Attribut name angegeben haben.


  • mit dem Namen der Grafik als Indexnamen (wie in Schema 3 / Beispiel 3)
    Diese Art ist eine zu Schema 2 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Dabei notieren Sie wie beim Ansprechen mit Indexnummer hinter document.images eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den Namen, den Sie bei der Definition der Grafik im einleitenden <img>-Tag im Attribut name angegeben haben. Diese Schreibweise ist vor allem zum Zugriff auf Grafiken nützlich, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Grafiknamen enthält.


  • mit dem Namen der Grafik direkt (wie in Schema 4 / Beispiel 4)
    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.


Empfehlung: Um Bilder einer Webseite anzusprechen, können Sie auch getElementsByTagName verwenden.


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
<html>
<head>
  <title>Test</title>
  <script>
    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>


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 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 src wird diese Grafik beim Klicken auf den Verweis durch christa.gif ersetzt.


Die Objektfunktion Image() kennt zwei optionale Parameter:

  • width: Breite des Bildes
  • 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.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML