Image Map

Image Map

Copyright ┬ę Shutterstock / Anton Balazh

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:

Ein Beispiel f├╝r eine clientseitige Image Map sieht folgenderma├čen aus:

< img src=/images/html.gif alt=”HTML Map” border=”0″ usemap=”#html”/>

< !- Erstellen der Maps ->

< map name=”html”>

< area shape=”circle” coords=”154,150,59″ href=”link1.htm” alt=”link 1″ target=”_self” />

< area shape=”poly” coords=”272,79,351,79,351,15,486,15,486,218,272,218, 292,166,292,136,270,76″ alt=”link 2″ href=”link2.htm” target=”_self” />

< /map>

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:

Definiert rechteckige Bereiche, bei denen x1 und y1 die Koordinaten der oberen linken Ecke des Rechtecks und x2 und y2 die Koordinaten der unteren rechten Ecke sind. Ein Rechteck von 15,15 bis 25,25 h├Ątte beispielsweise das Attribut coords = “15,15,25,25”. Ein Rechteck, welches die linke H├Ąlfte eines Bildes definiert, k├Ânnte coords = “0,0,50%,100%” verwenden.
Definiert einen Kreis. xc und yc sind die Koordinaten des Mittelpunkts des Kreises und “radius” ist der Radius des Kreises. Ein Kreis bei 100,200 mit einem Radius von 25 Pixel h├Ątte das Attribut coords = “100,200,50”.
Definiert ein Vieleck (Polygon). Mit den x-y-Paaren werden die Punkte des Polygons definiert. Zu beachten ist hierbei, dass die Angabe der Koordinaten so erfolgen muss, dass das Polygon in sich geschlossen ist.

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.

Tipp

Wenn Sie noch Fragen bez├╝glich eines Online Marketing Themas haben, dann k├Ânnen Sie gerne unseren Glossar besuchen und sich ├╝ber das Thema informieren, wo Sie noch speziell Fragen haben.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte