Sie sind hier:
Startseite
» Grafik-Tutorials » A: Imagemaps
Imagemaps
Für alle, die es noch nicht wissen sollten: eine Imagemap ist eine Grafik, in der verschiedene Bereiche zu Links deklariert werden. Wie so eine Map funktioniert soll anhand dieses Workshops durchgearbeitet werden. Doch zunächst etwas Theorie. Eine Bereich einer Grafik wird mittels html und meistens auch Javascript zu einem Linkbereich aufgewertet. Um einer Grafik zu sagen, daß sie in Zukunft mit einer Imagemap verbunden ist, wird das Attribut "usemap" im "img"-Tag eingetragen:
Anschliessend wird die map definiert:
<map name="mapname"> <area shape="Attribut" coords="Koordinaten" alt="Ersatztext" href="Link" target="Ziel"> </map>
Für das "shape"-Attribut gibt es nun 4 verschiedene Möglichkeiten. Dabei sind die hier angegebenen Koordinaten-Variablen durch die entsprechenden reellen zu ersetzen. Ausserdem ist zu beachten, daß die Koordinaten immer von der linken oberen Ecke der Grafik aus angegeben werden.
Bild 1: Rechteckiges Area:
Bild 2: Kreisförmiges Area:
Bild 3: Polygones Area:
ohne Bild: Rest-Area (der restliche, nicht angegebene Bereich einer Grafik):
Soll nun ein definierter Bereich ohne Link aktiv sein, so muß anstatt des "href"-Attributs "nohref" notiert werden. Und beachten Sie auch folgendes: der "area"-Tag ist einer der wenigen, die kein End-Tag besitzen. In der Praxis könnte eine Imagemap dann etwa
so aussehen (ein neues Fenster wird geöffnet).
Und das wäre der Quelltext dazu:
Um den Rahmen nicht zu sprengen habe ich absichtlich auf eine reelle Verlinkung verzichtet. Aber beim Anklicken können Sie anhand der punktierten Linie sehr genau sehen, wie die einzelnen Areas verlaufen.
Achtung ! Hier beginnen Browserspezifische Eigenheiten zu greifen. Nicht jeder Browser interpretiert das ALT-Attribut richtig. Um möglichst alle zu erreichen, sollten Sie daher zusätzlich noch ein "Title"-Attribut mit gleichem Namen einfügen. Ausserdem stellen nicht alle Browser die punktierte Aktion-Linie dar.
Ein Polygon mit der Hand zu erstellen ist zwar mittels der Koordinatenangabe in den Grafikprogrammen möglich, aber sehr mühsam. Zum Glück gibt es jede Menge Tools, die Ihnen diese Arbeit abnehmen:
GeoHTML
Nach oben springen..
