Image Map

Was ist eine Image Map?

Bei der Webseitenentwicklung ist eine Image Map ein Bild, das so definiert ist, dass ein Benutzer auf verschiedene Bereiche des Bildes klicken und mit verschiedenen Zielen verknüpft werden kann. Eine Image Map wird erstellt, indem jeder der klickbaren Bereiche anhand seiner x- und y-Koordinaten, das heißt durch eine bestimmte horizontale Entfernung und eine bestimmte vertikale Entfernung in Pixeln von der linken Ecke des Bildes definiert wird. Zu jedem Koordinatensatz wird ein Uniform Resource Locator oder eine Webadresse angegeben.

Image Maps wurden in der Vergangenheit verwendet, um ganze Websites zu erstellen. Zu diesem Zweck wurde das Layout der Webseite einschließlich Schaltflächen als ein einziges großes Bild designt und anschließend eine Image Map erstellt, durch welche die verschiedenen Bereiche mit Linkzielen verknüpft wurden. Image Maps werden heute noch eingesetzt, um zum Beispiel anhand einer Deutschlandkarte Webseitenbesucher zu regionalen Niederlassungen eines Unternehmens zu führen, in dem die Bundesländer auf der Karte einzeln anklickbar gestaltet werden.

Wie wird eine Image Map erstellt?

HTML– und XHTML bieten eine Funktion, mit der viele verschiedene Links in dasselbe Bild eingebettet werden können. Durch Klicken auf verschiedene Bereiche des Bildes wird der Browser mit verschiedenen Zieldokumenten verknüpft.

Es gibt zwei Möglichkeiten, eine Image Map zu erstellen: als serverseitige oder clientseitige Image Map:

Serverseitige Image Maps

Bei einer serverseitigen Image Map wird dem Bild ein Anker hinzugefügt, indem ein < img> -Tag in den Text des < a> -Tags einfügt wird. Maussensitiv wird da Bild, indem dem < img> -Tag das ismap-Attribut hinzufügt wird. Dieses spezielle < img> -Attribut weist den Browser darauf hin, dass das Bild eine spezielle Map ist, die mehr als einen Link enthält.

Wenn der Benutzer auf eine Stelle innerhalb des Bildes klickt, übergibt der Browser die Koordinaten des Mauszeigers zusammen mit der im < a> -Tag angegebenen URL an den Server. Anhand der Koordinaten des Mauszeigers kann der Server das Dokument ermitteln, dass an den Client zurückgegeben werden soll.

Wenn “ismap” verwendet wird, muss das href-Attribut des enthaltenden < a> -Tags die URL einer Serveranwendung wie eine amap-Datei oder ein cgi-Skript enthalten, um die eingehende Anfrage basierend auf den übergebenen Koordinaten zu verarbeiten.

Wenn ein Benutzer beispielsweise auf einen Punkt 50 Pixel nach rechts und 30 Pixel nach unten von der oberen linken Ecke des Bildes klickt, das den folgenden Link enthält:

< a href=”/cgi-bin/logo.map” target=”_self”>

< img ismap src = “/ images / html.gif” alt = “HTML” border = “0” />

< /a>

dann sendet der Browser die folgenden Parameter

/cgi-bin/logo.map?50,30

an den HTTP-Server, sodass das Ziel des Links angezeigt werden kann. Das Konvertieren der Koordinaten in ein bestimmtes Dokument erfolgt hierbei über die serverseitige Anwendung, entweder über das CGI-Programm oder spezielle Kartendateien, die vom Webserver bereitgestellt werden.

Clientseitige Image Maps

Eine clientseitige Image Map wird durch das UseMap-Attribut für das < img /> -Tag aktiviert und durch spezielle < map> – und < area> -Erweiterungs-Tags definiert.

Das Bild, das die Karte bildet, wird wie gewohnt mit dem Element < img /> in die Seite eingefügt, mit dem Unterschied, dass es ein zusätzliches “usemap” Attribut enthält. Der Wert des UseMap-Attributs ist der Wert des Namensattributs für das < map> -Element, gefolgt von einem Rautenzeichen.

Das < map> -Element erstellt die Map für das Bild und folgt normalerweise direkt nach dem < img /> -Element. Es fungiert als Container für die Elemente < area />, die die anklickbaren Bereiche des Bildes definieren. Das Element < map> enthält nur das Attribut “name”, das der Name der Karte ist. So weiß das < img /> -Element, welches < map> -Element verwendet werden soll.

Das Element < area> gibt die Form und die Koordinaten an, die die Grenzen jedes anklickbaren Bildbereiches definieren. Ein Beispiel für eine clientseitige Image Map sieht folgendermaßen aus:

Bei diesem Beispiel wird eine Image Map mit zwei klickbaren Bereichen in Form eines Kreises (circle) und eines Polygons (poly) erstellt. Der tatsächliche Wert der Koordinaten (coords) hängt vollständig von der jeweiligen Form ab. Die drei möglichen Formen in einer Image Map werden wie folgt definiert:

Eine Image Map sollte nur verwendet werden, wenn die Informationen, die vermittelt werden müssen, besser visuell dargestellt werden als mit einem Text. Die beste Verwendung einer Image Map ist für eine Karte. Karten vermitteln eine große Menge an Informationen auf kleinem Raum und werden durch Image Maps interaktiv.