# Verweis-sensitive Grafiken

Unter Verweis-sensitiven Grafiken versteht man eine Grafik, bei der verschiedene Teile angeklickt werden können. Das anschaulichste Beispiel wäre vielleicht eine Landkarte, bei der man die Städtenamen anklickt und so weiter verzweigt.

Der erste Befehl den man für eine Verweis-sensitive Grafik benötigt, heißt <map name="Name">. 'Name' ist dabei eine beliebig gewählte Bezeichnung für die Verweis-sensitive Grafik. Sie hat nichts mit dem eigentlichen Dateinamen zu tun!
Abgeschlossen wird die Definition mit </map>.

Als zweiter Befehl wird das bekannte <img src= Tag benutzt:
<img src="Dateiname" usemap="#Name">
Durch die zusätzliche Angabe usemap= weiß der Browser, das diese Grafik Verweis-sensitiv sein soll. Der Name, der bei usemap= steht, muß natürlich mit dem Namen, der unter <map name= vergeben wurde, identisch sein. Der einzige Unterschied ist das Gatter: Es muß nach den Anführungszeichen bei usemap= stehen.
Faßen wir doch mal die beiden Schritte in einem Beispiel zusammen:
<img src="karte.gif" usemap="#usa">
<map name="usa">
</map>

Dieses Beispiel ist für sich genommen allerdings wenig sinnvoll, denn woher sollte der Browser wissen, welche Bereiche der Grafik man anklicken kann und welche nicht? Aber dazu kommen wir jetzt:

### Bereiche als Verweis-sensitiv definieren

Für Verweis-sensitive Bereiche bietet HTML drei verschiedene Formen an: Quadratisch, Rund und Polygon. Für die Defintion werden ferner genaue Pixel-Werte benötigt. Diese Werte kann man relativ einfach mit GEM-View oder einem anderen Programm ermitteln.
Ein Verweis-sensitiver Bereich wird in der <map name=...>... </map> Umgebung bestimmt. Der Befehl hierzu lautet <area shape=" Form" coords="Koordinaten" href="Ziel">
Statt 'Form' setzen Sie folgende Worte ein, je nach dem, welche Form der Verweis-sensitive Bereich haben soll:

- rect für eine quadratische Form
- circle für eine Kreis-förmige Form
- polygon für ein Polygon

In coords= werden die Koordinaten für den Bereich angegeben. Je nach dem, welche Form Sie gewählt haben, müssen auch die Koordinatenangaben anders gewählt werden.

### Koordinatenangabe für quadratische Formen

<area shape="rect" coords="5,5,10,10" href="ziel.htm">
Vier Koordinaten werden für ein Quadrat oder ein Rechteck benötigt und werden durch Kommas voneinander getrennt. Die ersten beiden Koordinaten bestimmen die linke obere Kante des Bereichs, das zweite Koordinatenpaar die rechte untere Ecke des Bereichs.

### Koordinatenangabe für Kreise

<area shape="circle" coords="20,20,10" href="ziel.htm">
Zwei Koordinaten finden beim Kreis Verwendung: Die x- und y-Koodinate. Der dritte Zahlenwert (im Beispiel 10) beschreibt den Radius des Kreis, den man erhält, wenn man Breite oder Höhe durch zwei teilt. Die x- und y-koordinate beziehen sich auf den Mittelpunkt des Kreises.

### Koordinatenangabe für Polygone

<area shape="polygon" coords="20,20,10,10,20,20" href="ziel.htm">
Ein Polygon (Vieleck) als Verweis-sensitive Form zu bestimmen, ist etwas mühsamer: Für jeden einzelnen Eckpunkt muß die Koordinate angegeben werden. Das ganze muß ein geschlossenes Gebilde ergeben, d.h. das letzte Koordinatenpaar muß mit dem ersten Koordinatenpaar identisch sein. Die Anzahl der Punkte, die angegeben werden, ist nicht beschränkt.

### Abschließendes Beispiel:

Klicken Sie auf eine der unteren Grafiken! Achten Sie doch mal auf die Mauszeigerform: Wenn sich der Mauszeiger über einem Verweis-sensitiven Bereich befindet, verwandelt er sich in eine Hand. CAB 1.5 beherrscht allerdings noch nicht die Polygonform, bzw. wandelt sie zur Rechteckform um.
Hier ist erstmal der Source-Code des unteren Beispiels:
<img src="symbole.gif" usemap="#symbolleiste">
<map name="symbolleiste">
<area shape="circle" coords="28,28,30" href="#kreis">
<area shape="polygon" coords="87,2,109,26,87,53,66,26,87,2" href="#polygon">
<area shape="rect" coords="123,2,177,50" href="#quadrat">
</map>

Für Fortgeschrittene: Tabellen.

Start * Das WWW * Inhalt