Grafik in HTML

springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]

Sobald die Unterstützung für das Format PNG fortgeschritten ist, kann man GIF den Rücken kehren. PNG ist GIF weit überlegen und zudem lizenzfrei verfügbar.

Versteht ein Browser ein Format nicht direkt, so wird i.a. eine externe Applikation gestartet oder die Datei lokal gespeichert. Näheres hatten wir in anonyme Verweise besprochen.

• Grundlagen zur Grafik
• Alternative Beschreibung
• Ausdehnung, Vergrößerung, Verkleinerung
• Ausrichten der Grafik
• Abstand zum Fließtext
• Icons, Maps
  • Icon
  • Map

Grundlagen zur Grafik

Grafik wird über das img-Element eingebunden. Die einfachste Form ist

<img src="URL" />

wobei der URL beliebig ist, d.h. es kann eine Grafik eingebunden werden, die sich im selbem Verzeichnis befindet, aber auch eine Grafik, die sich irgendwo im Netz befindet.

(Kennt man die genaue Lokalisation und ist sich recht sicher, dass die Grafik dort bleibt, wo sie ist, kann man sie also von dort holen und eigene Kapazitäten sparen.

Der Nachteil bei dieser Vorgehensweise ist, dass zu dem Server erst eine Verbindung aufgebaut werden muss.

Befindet sie sich im selben Verzeichnis oder zumindest auf demselben Server, so besteht die Verbindung bereits. Das wiederum heißt, dass die Grafik insgesamt schneller verfügbar ist.)

Alternative Darstellung, Beschreibung

Wie wir bereits in einem frühen Abschnitt über Plattformunabhängigkeit besprochen haben, gibt es nicht-grafische Browser (oder der Benutzer hat z.B. die Grafik abgeschaltet). In diesem Fall ist also eine Ersatzdarstellung unbedingt erforderlich:

<img src="einbild.jpg" alt="Ein Bild" />

D.h. die alternative Darstellung wird im Attribut alt untergebracht. (Die Verwendung dieses Attributs wird vom Autor unbedingt empfohlen.)

Ausdehnung, Vergrößerung, Verkleinerung

Grafiken können erst dann geladen werden, wenn die HTML-Datei geladen wurde (sonst sind ja die Referenzen noch nicht bekannt).

Üblicherweise stellen Browser die HTML-Datei sofort nach dem Empfangen dar, damit der Benutzer schon mal mit der Betrachtung anfangen kann.

Die Grafiken werden dabei durch einen kleinen Platzhalter mit, wenn angegeben, der Beschreibung (aus alt) dargestellt. Wurde nun eine Grafik übertragen, so wird das komplette Browserfenster neu gezeichnet.

Dies liegt daran, dass i.a. die Ausdehnungen der Grafik nicht mit denen der bislang dargestellten Ersatzdarstellung übereinstimmen, und somit etwa der Text reformatiert werden muss.

Dies kann störend wirken.

Es besteht daher die Möglichkeit dem Browser in der HTML-Datei die Breite und die Höhe der Grafik über die Attribute width und height mitzuteilen.

Ein diese Attribute auswertender Browser wird also die Ausdehnung sofort entsprechend wählen. Das Einladen der Grafik erfolgt dann in diese Bereiche und das Fenster muss nicht neu gezeichnet werden.

<img src="einbild.jpg" alt="Ein Bild" width="80" height="60" />

Die Attribute können auch dazu verwendet werden, um Bilder zu vergrößern oder zu verkleinern. Dies wird allerdings nicht von jedem Browser vernünftig dargestellt.

<img src="einbild.jpg" alt="Ein Bild" width="40" height="30" />

Die sicher naheliegende Idee diese Funktion auszunutzen, um Übersichten verfügbarer Bilder zu liefern, erweist sich schnell als ungünstig. Das liegt daran, dass der Browser die Skalierung vornimmt, er lädt freilich die gesamte Grafik.

Daher ist zumindest aus den Gründen Übertragungszeit und -kosten der übliche Weg benutzerfreundlicher, bei dem zu den Bildern von vornherein zusätzlich kleine Bildchen zur Verfügung gestellt werden.

Diese dienen i.a. als Icons, bei deren Anklicken die eigentliche (größere) Grafik geladen wird.

Ausrichten der Grafik

Grafiken werden, wenn nicht speziell anders erklärt, als Bestandteil des Fließtext aufgefasst. Mit der Ausrichtung kann beschrieben werden, wo die Grafik an den Fließtext angelegt wird.

Hierfür ist das align Attribut zuständig. Gültige Werte sind top, middle und bottom.

Dies ist align="top"

Dies ist align="middle"

Dies align="bottom"

Sie sehen, dass weder middle, noch bottom wirklich schön sind. Das liegt an der Unterlänge des g von align. Das Alignment ist relativ zur Baseline. Das bekommt man auf anderen Wegen, die wir noch kennenlernen werden, besser hin.

Umfließen von Grafik

Grafiken werden, wenn nicht speziell anders erklärt, als Bestandteil des Fließtext aufgefasst. Soll eine Grafik aus dem Fließtext herausgenommen werden, so ist dies über das Attribut align mit den möglichen Werten left und right anzugeben.

Die Grafik wird dann entsprechend an den linken bzw. rechten Rand gesetzt.

In dieser Form ist die Kontrolle unvollständig, d.h. der Browser wählt eine "geeignete" Position für die Grafik. Dabei kann es auch vorkommen, dass Grafiken direkt nebeneinander plaziert werden.

Dies kann durch einen erzwungenen Zeilenumbruch umgangen werden. Dabei wird dem br-Tag das Attribut clear mit den möglichen Werten left, right und all mitgegeben.

<br clear="left" />

führt dazu, dass die nächste Zeile frühestens nach dem Bild am linken Rand beginnt.

<br clear="right" />

führt dazu, dass die nächste Zeile frühestens nach dem Bild am rechten Rand beginnt.

<br clear="all" />

führt dazu, dass die nächste Zeile frühestens dort beginnt, vor weder am linken noch am rechten Rand ein Bild ist.

Liegt an der angegeben Seite kein Bild, dies ist der Fall, wenn etwa der Fließtext höher als das Bild ist, dann wirkt die Zeilenumbruch wie der nicht-attributierte br Umbruch.

Beispiel: Bilder werden links und rechts gesetzt, jeweils mit einem <br /> dazwischen.

Ein Bild rechts
<img src="/images/bb-button.gif" width="88" height="31"
border="0" alt="Button" align="right" /><br />
Ein Bild links
<img src="/images/bb-button.gif" width="88" height="31"
border="0" alt="Button" align="left" /><br />
Ein Bild rechts
 <img src="/images/bb-button.gif" width="88" height="31"
border="0" alt="Button" align="right" /><br />
Nochmal
rechts
<img src="/images/bb-button.gif" width="88" height="31"
border="0" alt="Button" align="right" /><br />

liefert

Beispiel: Analog, aber mit <br clear="all" /> dazwischen.

Ein Bild rechts
<img src="/images/bb-button.gif" width="88" height="31"
border="0" alt="Button" align="right" /><br clear="all"/>
Ein Bild links
<img src="/images/bb-button.gif" width="88" height="31"
border="0" alt="Button" align="left" /><br clear="all"/>
Ein Bild rechts
 <img src="/images/bb-button.gif" width="88" height="31"
border="0" alt="Button" align="right" /><br clear="all"/>
Nochmal
rechts
<img src="/images/bb-button.gif" width="88" height="31"
border="0" alt="Button" align="right" /><br clear="all"/>

liefert

Sie sehen die Wirkung von clear. Ohne clear kann es soweit gehen, dass der Browser die Button über den Text legt, einfach weil nicht genug Platz ist.

Abstand zum Fließtext

Fließtext liegt üblicherweise eng an einer Grafiken an bzw. umfließt die Grafik recht nahe. Mit den Attributen hspace bzw. vspace kann der horizontale bzw. vertikale Mindestabstand zwischen Grafik und Text angegeben werden.

<img src="einbild.jpg" alt="Ein Bild" width="120" height="90"
     hspace="40" vspace="30" />

Beispiel (ohne Abstände):

<img src="/images/bb-button.gif" width="88" height="31"
border="0" alt="Button">
Flie&szlig;text liegt &uuml;blicherweise eng
an einer Grafiken an bzw. umflie&szlig;t
die Grafik recht nahe. Mit den
Attributen hspace bzw. vspace
kann der horizontale bzw. vertikale
Mindestabstand zwischen Grafik und Text
angegeben werden.

liefert

Beispiel (übertriebene Werte):

<img src="/images/bb-button.gif" width="88" height="31"
border="0" alt="Button" vspace="20" hspace="32">
Flie&szlig;text liegt &uuml;blicherweise eng
an einer Grafiken an bzw. umflie&szlig;t
die Grafik recht nahe. Mit den
Attributen hspace bzw. vspace
kann der horizontale bzw. vertikale
Mindestabstand zwischen Grafik und Text
angegeben werden.

Icons, Maps

Im Anschnitt über Verweise wurde bereits angekündigt, dass auch Grafiken als Linkbezeichnungen in Frage kommen.

Genaugenommen gilt es zwei Möglichkeiten, in denen Grafiken bei Verweisen eine Rolle spielen:

1. die Grafik ist genau ein Verweis
   In diesem Fall spricht man von einem Icon. Icons sind i.a. kleine Bildchen.
2. die Grafik stellt mehrere Verweise dar
   In diesem Fall spricht man von einem Clickable Image oder von einer Map (Karte). Hierbei werden Teilen der i.a. größeren Grafik Verweise zugeordnet.

Icon

Wenn man einem Verweis eine grafische "Bezeichnung" gibt, spricht man häufig von einem Icon.

In HTML werden diese Icons völlig analog zu textuellen Verweisen gesetzt:

<a href="URL">
  <img src="einbild.jpg" alt="Ziel" width="80" height="60" />
</a>

Zur Verdeutlichung, dass es sich um einen Verweis handelt, zeichnet der Browser üblicherweise noch einen Rahmen um die Grafik. Dabei werden dieselben Farben wie für Links benutzt. Es wird auch zwischen unbesuchtem, besuchtem und gerade angeklickten Verweis unterschieden.

Die Dicke dieses Rahmens kann mit dem border-Attribut eingestellt werden:

<a href="URL">
  <img src="einbild.jpg" alt="Ziel" width="80" height="60" border="3" />
</a>

Setzen Sie den border-Wert auf 0, um den Rahmen zu entfernen. (Diese Vorgehensweise ist nicht schädlich, da der Browser das Aussehen des Cursors i.a. anpasst, wenn sich dieser über einem Verweis befindet.)

Map

Bei einer Map (auch Clickable Image, Karte) handelt es sich um eine Grafik, bei der verschiedene Teile ggf. verschiedene Ziele repräsentieren.

Die Definition ist entsprechend komplexer. Es gibt aber Tools, mit denen man eine solche Map erstellen kann. Dabei konstruiert man die Map mit geeigneten Funktionen am Bildschirm. Generell geht dies aber auch von Hand.

Die wesentliche Arbeit fließt hierbei in die Erstellung der Bereichsdaten, die durch den map-Tag gekapselt ist. Die einzelnen Bereiche werden in area-Elementen beschrieben.

<map name="einemap">
  <area shape="shapeTyp" coords="Koordinaten und Werte" href="zielURL" />
  ...
  <area shape="shapeTyp" coords="Koordinaten und Werte" href="zielURL" />
</map>

Shape-Typen sind bestimmte geometrische Objekte bzw. Figuren, die über die Koordinaten beschrieben werden, die Teile der Grafik umfassen.

Der jeweilige URL wird dann angesprungen, wenn der Benutzer in den entsprechenden Bereich geklickt hat. Die URLs können – müssen aber nicht – verschieden sein.

Ist für einen Bereich kein Ziel vorgesehen, so wird anstelle von href="zielURL" die Angabe nohref="nohref" gesetzt.

Folgende Shape-Typen existieren:

rect

bestimmt einen rechteckigen Bereich. Die Koordinaten haben die Form "x1,y1,x2,y2" und legen die linke obere (x1,y1) und rechte untere (x2,y2) Ecke des Rechteckes fest. Die Komponenten werden in Pixel (Bildpunkte) relativ zur linken oberen Ecke der Grafik (0,0) angegeben.

<area shape="rect" coords="10,20,50,40" href="zielURL-1" />

circle

bestimmt einen runden Bereich. Die Koordinaten haben die Form "mx,my,r" und legen den Mittelpunkt (mx,my) und den Radius r des Kreises fest.

<area shape="circle" coords="100,100,25" href="zielURL-2" />

polygon

legt einen beliebig umrahmten Bereich (Vieleck, Polygon) fest. Die Koordinaten haben die Form "x1,y1,x2,y2,...,xN,yN", wobei die (xi,yi) die Ecken den Polygons beschreiben. Die Anzahl der Koordinaten(paare) ist zwar nicht beschränkt, sollte aber nicht allzu lang sein. Es wird stets ein geschlossenes Polygon angenommen, d.h. auch dann, wenn (xN,yN) ungleich (x1,y1) gilt.

<area shape="polygon" coords="100,100,150,150,50,150" href="zielURL-3" />

default

bedeutet "alles nicht andersweitig definiertes". Bei dieser Form wird sinnvollerweise die Koordinatenliste fortgelassen.

<area shape="default" href="zielURL" />

Besonders häufig tritt man default so an, dass nicht gesprungen wird:

<area shape="default" nohref="nohref" />

was bedeutet: bei jedem definierten Bereich verfahre wie dort angegeben, ansonsten (d.h. der Benutzer klickt in einen nicht speziell definierten Bereich) mache gar nichts.

Um aus einer Grafik schließlich die Map zu machen, muss die zu verwendende Map-Definition nur noch als Wert des usemap Attributes festgelegt werden.

<map name="einemap">
  <area shape="rect" coords="10,20,50,40" href="zielURL-1" />
  <area shape="circle" coords="100,100,25" href="zielURL-2" />
  <area shape="polygon" coords="100,100,150,150,50,150" href="zielURL-3" />
  <area shape="default" nohref="nohref" />
  ...
</map>
...
<img src="karte.jpg" alt="Verteiler" width="150" height="150" border="0"
     usemap="#einemap">

Die Schreibweise macht klar, dass hier auch jede andere Karte eingesetzt werden kann. Insbesondere kann man sowohl die Grafik, als auch die darauf liegende Karte von anderen Servern holen, oder frei kombinieren, zum Beispiel "eigene Grafik, fremde Map" bzw. "fremde Grafik, eigene Map".

Manche Browser werden das Attribut name von area aus. Wenn angegeben wird dann anstelle der Ziel-URL dieser Name (etwa in der Statuszeile des Browser) angezeigt.

<area shape=... coords=... href="zielURL-1" name="nach sonstwo" />

Beachten Sie bitte, dass die als Verweise definierten Bereiche in keiner Weise hervorgehoben werden. Allerdings wird der Browser das Aussehen des Cursors anpassen, wenn er sich über einem Verweis befindet.