Wie funktioniert eine Imagemap

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. Ein Bereich einer Grafik wird mittels html und meistens auch Javascript zu einem Linkbereich aufgewertet. Um einer Grafik zu sagen, dass sie in Zukunft mit einer Imagemap verbunden ist, wird das Attribut "usemap" im "img"-Tag eingetragen:



Anschliessend wird die map definiert:




Bild 1
Bild 2
Bild 3


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, dass 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 haben wir 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: Image Maps.
Seite ausdrucken