| Syntax | <IMG> |
|---|---|
| Attribut-Spezifikationen |
|
| Inhalte | Leer |
| Beinhaltet in | Inline Elemente, Block-Level Elemente außer PRE |
Das IMG-Element spezifiziert ein Inline Bild. Das notwendige SRC-Attribut legt den Ort des Bildes fest. Das Bild kann jedes Format haben, jedoch unterstützen die Browser generell nur GIF, JPEG und PNG-Bilder.
Das notwendige ALT-Attribut bietet einen alternativen Text für die an, die keine Bilder laden. Effektiver ALT-Text sollte generell eher die Funktion des Bildes angegeben als eine Beschreibung des Bildes. Zum Beispiel, ALT="Welcome to XYZ Corp." wäre passender als ALT="XYZ Corp. Logo" für das Firmenlogo auf der Willkommensseite. Guter ALT-Text ist entscheidend für die Dokument-Erreichbarkeit für den User, der keine Bilder lädt; Schauen Sie sich für eine gründliche Auseinandersetzung dazu Use of ALT texts in IMGs an.
Das LONGDESC-Attribut gibt den Ort der langen Beschreibung des Bildes an. Diese Attribut sollte, wo es hilfreich ist, verwendet werden um eine lange Beschreibung eines Bildes anzubieten. Zum Beispiel, eine Zeichnung, ein Graph oder ein Firmenlogo kann als Beschreibung angegeben werden, sodass Blinde oder andere Text-Nutzer sich ein mentales Bild machen können.
Die WIDTH- und HEIGHT-Attribute sind am nützlichsten, wenn sie die exakten Dimensionen des Bildes in Pixeln festlegen. Dies erlaubt Bilder-ladenden Browsern den passenden Platz für die Bilder zu reservieren und fortzufahren den Rest des Dokuments anzuzeigen, dies hat den Anschein einer schneller ladenden Seite.
Unglücklicherweise verwenden viele Browser diese Dimensionen auch, wenn die Bilder nicht geladen werden, was dazu führen kann, dass der ALT-Text abgeschnitten wird, wenn das Bild klein ist oder der ALT-Text lang. In solchen Fällen kann es sein, dass die Autoren die WIDTH- und HEIGHT-Attribute weglassen möchten, dies hängt jedoch von der Wichtigkeit des ALT-Textes und der Platzierung des Bildes auf der Seite ab (ein Bild gegen Ende des Dokuments ohne WIDTH- und HEIGHT-Attribute verlangsamt die Darstellung der Seite kaum merklich).
Autoren können auch verschiedene Dimensionen für WIDTH- und HEIGHT-Attribute angeben, in dem Fall sollten die Browser das Bild skalieren. Prozentwerte, die relativ zum horizontal und vertikal verfügbaren Raum sind (nicht relativ zur natürlichen Größe des Bildes) können auch festgelegt werden, jedoch sind diese nicht so stark unterstützt wie die Pixelangaben. Da Browser normalerweise im Skalieren von Bildern eher begrenzte Fähigkeiten haben, sollten die Autoren es möglichst vermeiden WIDTH und HEIGHT für diesen Zweck zu verwenden.
Das ALIGN-Attribut, deprecated in HTML 4, legt die Ausrichtung des Bildes fest. Die Werte top, middle und bottom spezifizieren die Position des Bildes unter Rücksichtnahme auf den umgebenden Inhalt zur Linken und Rechten.
ALIGN=middle richtet das Bild vertikal mittig zur aktuellen Grundlinie aus. Um das Bild horizontal mittig auszurichten, platzieren Sie das Bild in einem zentrierten Block, z.B.,
<H1 ALIGN=center><IMG SRC="logo.gif" ALT="Welcome to XYZ Company"></H1>
Die anderen ALIGN-Werte, left und right, spezifiziere ein fließendes Bild; das Bild wird am linken oder rechten Rand platziert und vom Inhalt umflossen. Um den Inhalt unter dem Bild zu platzieren, verwenden Sie am besten <BR CLEAR=left|right|all>.
Die vertical-align- und float-Eigenschaften der Cascading Style Sheets bieten flexiblere Methoden um Bilder auszurichten.
Das BORDER-Attribut, deprecated in HTML 4, legt die Randbreite des Bildes in Pixeln fest. Setzt man BORDER=0 wird der Rand um das verlinkte Bild in den meisten Browsern komplett eliminiert. Autoren sollten BORDER=0 nur verwenden, wenn das Bild klar als Link identifiziert werden kann oder als Methode um die Betonung vom Link zu nehmen. Zum Beispiel:
<A HREF="reference/"><IMG SRC="icon/reference.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web Authoring Reference</A>
Die deprecated HSPACE- und VSPACE-Attribute erlauben einem Autor die horizontalen und vertikalen Räume um das Bild herum zu beeinflussen. Der Wert muss in Pixeln angegeben werden und wird auf beide Seiten des Bildes angewendet. Style Sheets bieten hier eine flexiblere Möglichkeit den Raum um ein Bild herum zu festzulegen.
Das USEMAP-Attribut wird mit Client-seitigen Image-Maps verwendet um den Ort der Map Definition anzugeben. Während dieser Wert eine komplette URL sein kann--eine einzige Map-Definition kann auf mehrere Seiten angewendet werden--erkennen viele Browser jedoch nur die Map-Definitionen aus der gleichen Datei an, indem der USEMAP-Wert effektiv auf einen Fragment-Identifier, wie z.B. "#map" begrenzt wird.
Das ISMAP-Attribut wird mit Server-seitigen Image Maps verwendet. Wenn das ISMAP-Attribut mit einem verlinkten Bild eingebunden wird und der User auf das Bild klickt, werden die angklickten Koordniaten zum Server gesendet von dem eine Adresse zurückgegeben werden kann. Die Aufnehmen der Koordinaten ist Server-abhängig, die meist verwendete Methode ist NCSA server's method.
Client-seitige Image Maps werden generell bevorzugt, da sie besser für den User zugänglich sind, die keine Mouse oder eine ähnliches haben. Beide Arten der Image-Map können auch zusammen verwendet werden, Browser, die Client-seitige Image-Maps unterstützen, benutzen diese Methode. Ein Beispiel:
<A HREF="/cgi-bin/imagemap/sitemap.map"><IMG SRC="sitemap.gif" ALT="Site Map" ISMAP USEMAP="#map" WIDTH=100 HEIGHT=100></A>
Ein MAP-Element, das als map bezeichnet wird, müsste in das gleiche Dokument miteingebunden werden.
Das NAME-Attribut, das in HTML 4.01 zu IMG hinzugefügt wurde, spezifiziert einen Namen um auf das Bild von einem Client-seitigen Script aus zuzugreifen. Das ID-Attribut bietet die gleiche Funktion, jedoch unterstützen alte Browser wie der Netscape 4.x nur das NAME-Attribut.
alt Texten in img Elementen
HTML 4.0 Referenz ~ Elemente nach Funktion ~ Elemente - alphabetisch
Copyright © 1998-2007 Liam Quinn. All rights reserved.