Wie werden Bilder auf einer Web-Seite angezeigt?

Ein paar Bilder auf einer Web-Seite können diese attraktiver und anwenderfreundlicher machen, allerdings sollte man es nicht übertreiben, denn die Bilder können eine ziemlich lange Ladezeit benötigne und in manchen Fällen der Lesbarkeit schaden.

Mit den Tags IMG der HTML-Sprache können Bilder in eine HTML-Seite eingefügt werden. Das Bild kann sich auf dem gleichen Server befinden wie die Seite in die es eingefügt wird aber auch auf einem anderen Server, indem man das URL komplett angibt.

Nur die folgenden Bildformate werden standardmäßig in den Spezifizierungen des W3C akzeptiert :

• Die Bilder JPEG (.JPG) : die Bilder mit einer hohen Anzahl an Farben werden gut komprimiert, d.h. dass sie weniger Platz einnehmen und so eine weniger lange Ladezeit beanspruchen)
• Die Bilder PNG : Ihr Umfang ist gering wenn es sich um Bilder mit wenig Farben und ähnlichen Tönen handelt. Dieses Format ermöglicht außerdem verwobene Bilder (die nach und nach angezeigt werden), mit einer Farbtiefe von 24 bits und Bilder au denen eine Farbe als Tranparent definiert wird.
• Die Bilder GIF : Sie besitzen die gleichen Vorteile wie die PNG-Bilder, davon abgesehen, dass das GIF-Format auf maximal 256 Farben beschränkt ist und das Format nicht vollständig frei ist.

Wie werden Bilder auf einer Web-Seite angezeigt?

Die Haupt-Attribute des Tags IMG sind folgende :

• SRC: gibt den Speicherplatz des Bildes an (obligatorisch)
• ALIGN: Spezifiziert die Anordnung des Bildes zum angrenzenden Text. Es kann folgende Werte haben: TOP, MIDDLE, und BOTTOM (darüber, in der Mitte und darunter)
• ALT: Ermöglicht es alternativ einen Text anzuzeigen wenn das Bild nicht erscheint.
• TITLE: Ermöglicht es eine Infoblase anzuzeigen, wenn das Bild mit dem Cursor überflogen wird.
• WIDTH: Ermöglicht es die Bildbreite zu spezifizieren
• HEIGHT: Ermöglicht es die Bildhöhe zu spezifizieren

Um also ein Bild einzufügen, muss ein Kennzeichen des folgenden Typen eingegeben werden :

<IMG SRC="url_de_l_image"
	ALT="Texte remplaçant l'image"
	TITLE="Texte à afficher">

Attribut	Wert	Ergebnis	Optischer Effekt
ALIGN	bottom center left middle top right	Anordnung des Bildes
ALT		Alternativer Text falls das Bild nicht erscheint
BORDER	ganze Zahl	Pixelanzahl des Randes. Die Randfarbe kann mit dem Attribut LINK oder TEXT des Tags <BODY&; definiert werden. Das standartmäßige Attribut BORDER hat den Wert 1 womit ein kleiner Rahmen um das Bild herum geschaffen wird. Um dieses kleine Ärgernis zu vermeiden, denken Sie daran es als gleich 0 zu definieren
HEIGHT	ganze Zahl	Höhe des Bildes (ausgedrückt in Pixel oder in %). Wenn dieses Attribut eine andere Dimension angibt als Orginaldimension der Abbildung, wird diese vom Browser dynamisch neu dimensionniert, wodurch eine weniger gute Darstellungsqualität entstehen kann.
HSPACE	ganze Zahl	Pixelanzahl des Abstandes zwischen Bild und angrenzenden Text (horizontal).	Text
LONGDESC		URL der Bildbeschreibung
LOWSRC	URL	Alternatives Bild (meist kleiner), das so lange angezeigt wird, bis das richtige Bild vom Browser geladen ist.
NAME		Ermöglicht es einen Namen für das Bild zu definieren. Dieses Attribut ist insbesondere für die Verwaltung der Bilder unter JavaScript nützlich.
SRC	URL	URL des Bildes
TITLE		Alternativ-Bild für den Fall dass das Bild nicht erscheint.
USEMAP		URL oder Name des Ankers der das reaktive Bild definiert
VSPACE		Pixelanzahl des Abstandes zwischen Bild und angrenzenden Text (vertikal).	Textprobe
WIDTH	ganze Zahl	Breite des Bildes (ausgedrückt in Pixel oder in %). Wenn dieses Attribut eine andere Dimension angibt als Orginaldimension der Abbildung, wird diese vom Browser dynamisch neu dimensionniert, wodurch eine weniger gute Darstellungsqualität entstehen kann.

Text der ein Bild umgibt

Die Bilder werden in den Text eingefügt wie ein Zeichen, so dass es unmöglich scheint, den Text an einem Bild entlang laufen zu lassen.

Tatsächlich gibt es dafür mehrere Möglichkeiten, hier zwei davon :

• Die erste besteht darin eine Tabelle zu schaffen mit einer Zeile und zwei Spalten in die das Bild und der Text eingesetzt werden.
• Die zweite (weniger präzise) besteht darin das Bild links- oder rechtsbündig auszurichten mit dem Attribut ALIGN und dann den Text einzugeben. Das Attribut CLEAR beendet diese Umhüllung.

Die reaktiven Bilder ("images MAP")

Es ist möglich innerhalb eines Bildes Zonen zu schaffen die angeklickt werden können, mit dem Attribut USEMAP das parallel mit dem Tag MAP verwendet wird.
Das Attribut USEMAP des Tags <IMG> zeigt auf einen Tag <MAP> welches die Beschreibung der Aufteilung des Bildes in anklickbare Zonen enthält.

Der Tag <MAP> hat ein Attribut NAME welches seinen Namen definiert (NAME="Name") und anklickbare Zonen enthält, dank des Tags AREA.

Hier ein Beispiel eines reaktiven Bildes :

<IMG SRC="images/image.gif"
	WIDTH=150
	HEIGHT=70
	USEMAP="#Map">
<MAP NAME="Map">
	<AREA SHAPE="rect"
		   HREF="debut.html"
		   COORDS="0,0,48,28">

	<AREA SHAPE="circle"
		   HREF="precedent.html"
		   COORDS="50,30,10">

	<AREA SHAPE="poly"
		   HREF="suivant.html"
		   COORDS="60,50,80,30,100,40,50,100">
</MAP>