HTML Reference

IMG

<IMG
ALIGN=TOP|MIDDLE|CENTER|BOTTOM|LEFT|RIGHT
ALT=text
BORDER=n
CLASS=type
CONTROLS
DYNSRC=url
HEIGHT=n
HSPACE=n
ID=value
ISMAP=image
LOOP=n
SRC=url
START=start-event
STYLE=css1 properties
TITLE=text
USEMAP=url
VSPACE=n
WIDTH=n>

Fügt ein Bild bzw. eine Grafik ein.

ALIGN=TOP|MIDDLE|CENTER|BOTTOM|LEFT|RIGHT
Setzt die Ausrichtung des Bildes und des umgebenden Textes. Standardwert ist TOP.
TOP Umgebender Text wird nach dem oberen Rand des Bildes hin ausgerichtet.
MIDDLE Umgebender Text wird nach oben und unten zum Bild hin in der Mitte ausgerichtet.
CENTER Umgebender Text wird zentriert zum Bild ausgegeben.
BOTTOM Umgebender Text wird zum unteren Rand des Bildes hin ausgerichtet.
LEFT Das Bild wird linksbündig ausgerichtet und der Text fließt um das Bild herum.
RIGHT Das Bild wird rechtsbündig ausgerichtet und der Text fließt um das Bild herum.
ALT=text
Spezifiziert einen Alternativtext innerhalb des Bildes, wenn die Option "Bilder Anzeigen" vom Benutzer ausgeschaltet wurde. Soll standardmäßig verwendet werden, um Benutzer ohne Bilddarstellungsmöglichkeit zu unterstützen.
BORDER=n
Spezifiziert die Größe des Rahmens um das Bild. Wenn das Bild einen Hyperlink darstellt, wird der Rahmen in der eingestellten Hyperlinkfarbe gezeichnet. Wenn das Bild kein Hyperlink ist, so bleibt der Rahmen standardmässig unsichtbar. Border=0 bewirkt, daß auch Hyperlinks ohne Rahmen angezeigt werden. Dieses Feature wird meist bei 3-D Icons verwendet, die durch ihre Stereowirkung auf die Anklickbarkeit hinweisen.
CLASS=type
Spezifiziert die zu verwendende Style-Klasse.
CONTROLS
Wenn ein Video-Clip vorhanden ist, so werden Kontrollelemente unter dem Clip angezeigt.
DYNSRC=url
Spezifiziert die Adresse eines Video-Clips der im Fenster angezeigt werden soll. DYNSRC steht für Dynamic Source.
HEIGHT=n
Vergleichbar mit WIDTH=, spezifiziert die Größe der Höhe in dem das Bild gezeichnet wurde. Wenn die wirklichen Ausmaße des Bildes von dieser Angabe differieren, so wird das Bild auf die angegebenen Maße vergrößert oder verkleinert. Einige Browser nutzen diese Größenangabe auch als Platzhalter bis das Bild geladen wurde.
HSPACE=n
Vergleichbar mit VSPACE=, spezifiziert Randbreite für das Bild. Benutzbar mit align siehe Beispiel
ID=value
Hier kann ein Ankername vergeben werden.
ISMAP=image
Identifiziert das Bild als Server-seitige klickbare Image-Map. Mausklicks in das Bild überbringen die Koordinaten zum Server, und dieser liefert eine Sprungadresse zu einer anderen Seite zurück.
LOOP=n
Spezifiziert wie oft ein Video-Clip wiederholt werden soll. Wenn n=-1oder wenn LOOP=INFINITE dann wird der Video-Clip ununterbrochen wiederholt.
SRC=url
Spezifiziert die Adresse des Bildes, welches angezeigt werden soll.
START=start-event
Spezifiziert, wann die Datei zum Spielen anfangen soll, wenn es mit dem DYNSRC= Attribut vorbereitet wurde. Der start-event kann einen der folgenden Werte besitzen:
FILEOPEN Mit dem Abspielen wird begonnen, sobald die gesamte Datei geöffnet wurde. Dies ist auch der Standardwert.
MOUSEOVER Mit dem Abspielen soll begonnen werden, wenn der Benutzer mit dem Mauszeiger über die Animation fährt.

Beide Werte können gleichzeitig gesetzt werden, müssen jedoch mit einem Komma getrennt werden.

STYLE=css1 properties
Spezifiziert Style-Informationen
USEMAP=url
Identifiziert das Bild als Client-seitiges klickbares Image-Map und hat ein MAP-Element zur Folge.
VSPACE=n
Vergleichbar mit HSPACE=, spezifiziert den Seitenrand des Bildes.
WIDTH=n
Vergleichbar mit HEIGHT=, spezifiziert die Größe (Breite) des Bildes.

Beispiel
Syntax:
Punkt rechts<img align=right src="../minipoints/redpt.gif" alt="[o]">
Ergebnis:
Punkt rechts[o]

Die Eigenschaft align bewirkt auch, dass der Text "herumfliesst". Besonders eindrucksvoll ist dieser Effekt bei align=center, wobei auch hspace und vspace verwendet werden sollten Syntax: <img src="beispiel.gif" hspace=20 vspace=20 alt="Beispiel für herunfliessenden Text" align="center">

Dreidimensionale Icons

Die einfachste 3D-Wirkung erzielt man bei Icons durch die Randgestaltung. Ein schwarzer/grauer Rand an der rechten und unteren Kante, ein weißer oder grauer an der oberen und linken Seite vermittelt den Eindruck eines hervorgehobenen Knopfes.

  

Umgekehrt kann auch ein versenkter Knopf dargestellt werden.

Beispiel hspace vspace

Um ein Bild an einem gewünschte Ort zu platzieren, kann man hspace und vspace verwenden. Das Bild wird vom letzten Text ausgehend mit einem entsprechenden (unsichtbaren) Rahmen versehen, sodass der nachfolgende Text den gleichen horizontalen Abstand einhält, wie der vorangehende Text. Im Beispiel sehen Sie zuerst die Syntax, dann die Auswirkung:
<img src="../10x10gif/diamondg.gif" width=10 height=10 hspace=50 vspace=100 alt="grüne Marke">
Text vor der grünen Markegrüne MarkeWeiterer Text nach der grünen Marke
<img src="../10x10gif/diamondr.gif" width=10 height=10 hspace=200 vspace=20 alt="rote Marke">
Text vor der roten Markerote MarkeWeiterer Text nach der roten Marke

Hauptanwendungsgebiet ist sicher eine Kombination mit align, wobei man erreicht, dass der Text nicht zu nahe ans Bild heranrückt. Beispiel: Bild von Peyrepetyse


Beispiel für horizontale Spiegelung eines Bildes mit Style-Angabe:
<img src="../gif/auge.gif" width=23 height=24"> !
<img src="../gif/auge.gif" width=23 height=24 style="filter:FlipH()">

!
,__,


Beispiel für eine normale und eine verwischte Grafik:
<img src="../gif2/altermann.gif">
<img src="../gif2/altermann.gif" style="filter:Blur(direction=270, strength=5)">

Anmerkung zur verwischten Grafik:

----------------------------------------------------------

Wünsche, Anregungen, Kritiken oder einfach Kommentare an Grünwald