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