Image Map
Inhaltsverzeichnis
Definition
Als Image Map wird eine Grafik auf einer Webseite mit klickbaren, sogenannten verweissensitiven Bereichen oder Hotspots bezeichnet. Diese sind jeweils mit verschiedenen Zielen verknüpft. Wird eine Grafik als Image Map genutzt, wird jeder der klickbaren Bereiche anhand seiner x- und y-Koordinaten, von der linken oberen Ecke des Bildes aus gesehen definiert. Zu jedem x,y-Koordinatenpaar wird eine URL oder eine Webadresse angegeben, die mit dem klickbaren Bereich verknüpft ist.
Anwendungsbeispiele für Image Maps
Vor einigen Jahren wurden noch ganze Webseiten als Image Map erstellt. Das gesamte Layout einschließlich aller Schaltflächen und Navigationselemente wurde mit Programmen wie beispielsweise Photoshop als ein großes Bild erstellt. Das Bild wurde anschließend in Bereiche aufgeteilt und die Bereiche mit Linkzielen verknüpft. Heute werden Image Maps genutzt, um Webseitenbesuchern beispielsweise anhand einer Karte von Deutschland Informationen über regionale Niederlassungen oder Servicestationen eines Unternehmens bereitzustellen. Dazu werden die Bundesländer oder Städte auf der Karte als klickbare Bereiche gestaltet, die mit den weiterführenden Informationen verknüpft sind. Eine solche Image Map findet man beispielsweise auf der Website von Höffner:
Screenshot mit Image Map von hoeffner.de
Möglichkeiten der Implementierung einer Image Map
Eine Grafik kann grundsätzlich als serverseitige oder clientseitige Map implementiert werden. Da die Verwendung alter Browser, die clientseitige Maps nicht unterstützten, vernachlässigbar ist, sind jedoch keine serverseitigen Maps mehr erforderlich. Zudem erfordert das Erstellen einer serverseitigen Image Map viel Wissen über serverseitige Programmierung. Clientseitige Maps hingegen können mit einfachen HTML Tags erstellt werden.
Clientseitige Image Map
Bei einer clientseitigen Image Map wird die Grafik, so wie bei anderen Bildern auch, mit dem Element <img/> in den HTML Code einer Seite eingefügt. Die Aktivierung der Grafik als Map erfolgt durch das Hinzufügen des "usemap" Attributes.
Mithilfe des <map> Tags wird im HTML Code die Map für das Bild erstellt. Dieses enthält das Attribut "name", welches den Namen der Karte definiert. Das <map> Tag dient bei einer Image Map als Container für die <area/> Elemente, mit denen die Formen und die Koordinaten der anklickbaren Bereiche des Bildes definiert werden. Der HTML Code für eine clientseitige Map kann beispielsweise wie folgt aussehen:
<img src=/images/karte.gif alt="Karte" border="0" usemap="#karte"/> <map name="Karte"> <area shape="circle" coords="150,150,45" href="document1.html" alt="document 1" target="_ blank"/> <area shape="poly" coords="3,47,45,12,105,7,140,60,120,125,12,90" alt="document 2" href="document2.html" target="_ blank"/> </map>
In diesem Beispiel wird eine Image Map mit zwei klickbaren Bereichen erstellt. Klickbar sind ein Kreis (circle) und ein Polygon (poly). Die Werte der Koordinaten (coords) sind von der Form der klickbaren Bereiche abhängig. Für eine Image Map können in HTML drei verschiedene Formen innerhalb der area Elemente definiert werden: rect, circle und poly.
rect - Definition rechteckiger Bereiche
Die Definition rechteckiger Bereiche erfolgt im HTML Code mit "rect = x1, y1, x2, y2". x1 und y1 sind die Koordinaten der oberen linken Ecke des Rechtecks. x2 und y2 die Koordinaten der unteren rechten Ecke. Bei einem Rechteck von 30,30 bis 50,50 wären die Koordinaten beispielsweise "coords = "30,30,50,50". Alternativ können für die Bereichsdefinition innerhalb der area Elemente auch Prozentangaben verwendet werden. Die Angabe coords = "0,0,50%,100%" definiert beispielsweise die linke Hälfte eines Bildes.
circle - Definition eines Kreises
Mit dem Attribut "circle = xc, yc, radius" wird in HTML ein Kreis definiert. Die Definition des Kreismittelpunktes erfolgt mit den Koordinaten xc und yc. radius ist der Radius des Kreises. Ein Kreis mit den Koordinaten xc = 50 und yc = 100 sowie einem Radius von 80 Pixeln wird beispielsweise durch die Angabe coords = "50,100,80" im area Element festgelegt.
poly - Definition eines Vielecks
Mit dem Attribut "poly" wird ein beliebiges Vieleck in einer Image Map definiert. Die Syntax lautet "poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn". Die x,y Koordinatenpaare definieren die einzelnen Punkte des Polygons. Wichtig ist dabei, dass die Koordinatenpaare im area Element so angegeben werden, dass das Polygon in sich geschlossen ist.
Erstellen einer Image Map mithilfe von Javascript und Flash-Plugins
Neben HTML ist die Verwendung von Javascript eine weitere Möglichkeit für die Implementierung einer Image Map. Javascript wird hierbei genutzt um die Position, d.h. die x- und y-Koordinaten des Mauszeigers zu ermitteln. Die Möglichkeit, eine Image Map mittels eines Flash-Plugins zu implementieren, gilt hingegen als veraltet und wird in der Praxis nicht mehr genutzt.
Die Vor- und Nachteile einer Image Map
Der wesentliche Vorteil einer Image Map ist die einfache Benutzerführung. Hinzu kommt, dass die Implementierung mittels HTML leicht umzusetzen ist. Am häufigsten finden Image Maps Verwendung für interaktive Karten, mit denen viele Informationen auf kleinem Raum bereitgestellt werden können. Allerdings sollte eine Image Map nur eingesetzt werden, wenn die zu vermittelnden Inhalte visuell besser dargestellt werden können als in Textform.
Ein wesentlicher Nachteil von Image Maps ist allerdings, dass diese nicht responsiv sind. Für mobile Endgeräte eignet sich eine Image Map daher nur sehr bedingt. Zudem müssen die sensitiven Bereiche eine bestimmte Mindestgröße aufweisen, um mit einem Fingertipp aktiviert werden zu können. Weiterhin werden Image Maps manchmal nicht ohne Weiteres von den Nutzern als Navigationshilfe erkannt und sind zudem nicht barrierefrei.
Suchmaschinen stehen Image Maps zunehmend kritisch gegenüber, da diese in der Vergangenheit häufig für Spam-Maßnahmen verwendet wurden. Die meisten Suchmaschinen folgen daher den Links in den Maps nicht.