brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]

Grafik in HTML

HTML für Einsteiger - Kapitel 8-2

von Thomas Salvador.

Teil 1 des Kapitels

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

Prinzipiell kann jedes Grafikformat verwendet werden. Besonders verbreitet sind die von den meisten Browser direkt unterstützten Formate GIF und JPG. Daher empfiehlt es sich, wenn man sich auf diese Formate beschränkt. Sobald die Unterstützung für das Format PNG fortgeschritten ist, sollte 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.

Dies ist Teil 2 von 2 des Kapitels.

Icons, Maps
- Icon
- Map

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:

die Grafik ist genau ein Verweis
In diesem Fall spricht man von einem Icon. Icons sind i.a. kleine Bildchen.
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="ziel">
  <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="ziel">
  <img src="einbild.jpg" alt="Ziel" width="80" height="60" border="3" />
</a>

Wünscht der HTML-Autor keinen Rahmen, so ist border sinnvollerweise auf 0 zu setzen. (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" href="zielURL" />
  ...
  <area shape="shapeTyp" coords="Koordinaten" href="zielURL" />
</map>

Shape-Typen sind bestimmte geometrische Objekte bzw. Figuren, die über die Koordinaten beschrieben werden, die Teile der Grafik umfassen. Die 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.
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.
polygon: legt schließlich 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.
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

<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" />
  ...
</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 www.sonstwo.her holen, oder kombinieren, etwa eigene Grafik, fremde Map (wobei die Grafik freilich zur Map passen sollte).

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.)

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" />