Image Map

Image Maps (deutsch: verweis-sensitive Grafiken) sind Grafiken, die mithilfe unsichtbarer Markierungen in mehrere klickbare Bereiche aufgeteilt werden. Sie ermöglichen es, mehrere Teile einer Grafik mit verschiedenen Hyperlinks zu versehen.

Definition der Image Map

Um eine Image Map zu erstellen, werden in ihr mindestens eine, unter Umständen aber auch mehrere geometrische Formen definiert. Die Flächen, die sich dabei ergeben, können mit einem beliebigen Ziel verlinkt werden, beispielsweise mit einer internen Unterseite, einem Download oder einem externen Linkziel. Image Maps können nicht nur in Grafiken, sondern auch in Videodateien genutzt werden.

Erstellung einer Image Map

Um eine Image Map zu erstellen, wird das HTML-Element <map name=““> verwendet. Es definiert den Namen der Map, der jedoch nicht unbedingt mit dem Dateinamen übereinstimmen muss. Dieser Name wird wie eine Art Ankerpunkt genutzt, um die Image Map später an anderer Stelle adressieren zu können.

Die Definition der Map kann an jeder beliebigen Position innerhalb des Bodies des HTML-Gerüsts platziert werden. Mit dem <area>-Attribut werden die einzelnen Bereiche innerhalb der Image Map definiert. Es muss mindestens ein <area>-Attribut vorhanden sein, nach oben hin ist die Anzahl hingegen lediglich durch die Pixelanzahl der Grafik beschränkt. Dieses Attribut muss mithilfe weiterer Eigenschaften weiter konkretisiert werden:

• shape: Das Attribut „shape“ kann drei Ausgestaltungen nehmen. „rect“ steht für eine viereckige Fläche. Mit „circle“ wird ein Kreis definiert. „poly“ hingegen wird verwendet, wenn eine aus beliebig vielen Ecken bestehende Figur nachgezeichnet werden soll. In unserer Beispielgrafik wurde ein Vieleck aus 14 Eckpunkten generiert.

• coords: Mit diesem Attribut werden die Koordinaten für die Begrenzung der Flächen angegeben. Hierfür werden mithilfe von Pixeln bestimmte Stellen in der Grafik markiert. Bei der Ermittlung der Koordinaten kann ein Bildbearbeitungsprogramm helfen, wo die Position des Mauszeigers meist in einer Informations- oder Statusleiste angezeigt wird.

• href: Mit href wird der Verweis auf die Zielseite gesetzt, beispielsweise auf eine interne oder externe Website.

• alt: Das alt-Attribut enthält den Alternativtext, der angezeigt wird, wenn die Image Map nicht geladen werden kann. Dies kann beispielsweise bei reinen Textbrowsern der Fall sein und ist auch für die Barrierefreiheit von blinden Nutzern von großer Bedeutung.

• title: Das title-Attribut enthält einen erklärenden Kurztext, der als Tooltip angezeigt wird, wenn der Nutzer mit der Maus über die Area fährt.

Einbeziehung der Image Map

Wenn die Image Map vollständig definiert wurde, kann sie jederzeit an einer beliebigen Stelle innerhalb des Dokuments abgerufen werden. Hierzu wird zunächst die Grafik wie gewöhnlich über das <img>-Tag an der richtigen Position eingebunden. Innerhalb des <img>-Tags kann die Image Map über das Element usemap=“#mapname“ einbezogen werden.

Einsatzbeispiele

Image Maps kommen im Alltag in verschiedensten Bereichen zum Einsatz, z. B.:

• interaktive Landkarten, die per Klick zur entsprechend gewählten Region weiterleiten
• Werbebanner, deren unterschiedliche Bereiche auf verschiedene Produkte oder Kategorien verlinken
• in Videos für die Einblendung von zusätzlichen Informationen oder Werbung für eine bestimmte Zeitspanne

Vor- und Nachteile

Image Maps versprechen insbesondere hinsichtlich der Usability einer Website eine starke Verbesserung hinsichtlich einer normalen Navigation. Durch eine gut strukturierte Grafik kann häufig eine intuitivere Navigation erreicht werden als mit klassischen Verweislisten mit Textverweisen. Dieser Vorteil kann allerdings auch ins Gegenteil verkehrt werden. Können nämlich in einem Browser keine Grafiken geladen werden, so kann die Navigation in ihrer eigentlichen Form nicht mehr verwendet werden. Um diese Problematik zu umgehen, sollte stets eine „Ersatznavigation“ in Form von klickbaren Textlinks erzeugt werden, um alternative Navigationsmöglichkeiten zu eröffnen.

Bedeutung für die Suchmaschinenoptimierung

Im Bereich der Suchmaschinenoptimierung werden Image Maps nur bedingt empfohlen. Sie werden im Spam-Bereich häufig verwendet, um das eigentliche Ziel eines Links zu verschleiern. Deshalb folgen viele Suchmaschinen den in Image Maps verwendeten Links nicht.

Weblinks

• Imagemaps: Kleine, aber feine Unterschiede
• Image maps and search engine visibility
• Imagemaps – verweissensitive Grafiken