HTML Image Map: Klickbare Grafiken mit dem map-Tag

Eine HTML Image Map be­zeich­net Website-Grafiken oder Videos, die über mehrere klickbare Bereiche verfügen, die zu internen oder externen URLs führen. Die so­ge­nann­ten ver­weis­sen­si­ti­ven Bereiche einer Image Map werden mit aus­ge­wähl­ten Ko­or­di­na­ten erstellt und mit zu­ge­hö­ri­gen URLs oder Web­adres­sen verknüpft.

Was ist eine HTML Image Map?

HTML Image Maps sind klickbare Grafiken, die die Be­nut­zer­freund­lich­keit und In­ter­ak­ti­vi­tät ver­bes­sern. Genauer gesagt lassen sich mithilfe von HTML Image Maps Grafiken und Videos in einem HTML-Dokument mit mehreren ver­link­ten und an­klick­ba­ren Bereichen versehen. Bei in­te­grier­ten Ver­weis­flä­chen kann es sich um Un­ter­sei­ten, Hy­per­links zu internen oder externen URLs oder Downloads handeln. Sobald Nut­ze­rin­nen und Nutzer auf die ver­link­ten Elemente klicken, lassen sich ge­wünsch­te Inhalte aufrufen oder Aktionen auslösen.

Zur Er­stel­lung von Image Maps kommt das HTML-Tag <map> zum Einsatz. Zur Ein­bin­dung der fertigen Image Map dient wiederum das HTML-img-Tag.

Wer seine HTML Image Map nicht selbst erstellen will, kann auf Image Map Ge­ne­ra­to­ren zu­rück­grei­fen. Bei diesen Online-Tools laden Sie einfach das ge­wünsch­te Bild hoch und legen an­schlie­ßend die ge­wünsch­ten Linkziele in Bild­be­rei­chen fest.

Wofür kann eine HTML Image Map genutzt werden?

Eine Image Map lässt sich in beliebige HTML-Dokumente in­te­grie­ren, sobald Sie die je­wei­li­gen Ver­weis­flä­chen definiert haben. Die Stärke der Maps liegt in der Mög­lich­keit, mehrere beliebige Ziele innerhalb einer Grafik oder eines Videos zu verlinken. Zu den viel­fäl­ti­gen Ein­satz­mög­lich­kei­ten und An­wen­dungs­be­rei­chen von HTML Image Maps zählen unter anderem:

• Land­kar­ten mit an­klick­ba­ren Ver­weis­flä­chen für Regionen, Städte, Fir­men­nie­der­las­sun­gen oder Ser­vice­sta­tio­nen
• Re­zept­bil­der mit Zu­satz­in­for­ma­tio­nen zu ab­ge­bil­de­ten Zutaten
• Wer­be­ban­ner mit un­ter­schied­li­chen ver­link­ten Produkten, Ka­te­go­rien oder Services
• Ein­ge­blen­de­te Zu­satz­in­for­ma­tio­nen oder Werbung in Videos
• Eine Website als Image Map mit mehreren Na­vi­ga­ti­ons­ele­men­ten
• Anzeigen von ver­schie­de­nen Spielmodi, Funk­tio­nen oder Levels in Online-Spielen

Wie erstellt man eine HTML Image Map?

Um eine Image Map zu erstellen, kommt das HTML-Element <map> zum Einsatz. Zu­sätz­lich ist das Attribut name zu verwenden, damit die Map re­fe­ren­ziert werden kann. Ver­ein­facht gesagt lässt sich das ge­wünsch­te Ziel dank dem Map-Namen in einer Grafik oder einem Video verankern, verlinken und adres­sie­ren. Es folgen weitere An­wei­sun­gen zu den Ko­or­di­na­ten der ver­link­ten Ver­weis­flä­chen.

Eine HTML Image Map lässt sich an jeder ge­wünsch­ten Stelle eines HTML-Dokuments plat­zie­ren. Hierzu legen Sie Bereiche und Ko­or­di­na­ten (coords) fest, mit denen Sie die Position, die Größe und die Form der Ver­weis­flä­che kon­kre­ti­sie­ren. Bereiche lassen sich in Form von Recht­ecken, Polygonen oder Kreisen in einer Grafik plat­zie­ren. Welche Ko­or­di­na­ten Sie verwenden, hängt von der Form der Ver­weis­flä­che ab.

Mit dem HTML-Attribut <area> können Sie wiederum in­di­vi­du­el­le Bereiche der Image Map de­fi­nie­ren. Um eine Image Map zu verwenden, ist min­des­tens ein area-Attribut er­for­der­lich. Um die Ei­gen­schaf­ten der Image Map und ihrer in­di­vi­du­el­len Ver­weis­flä­chen zu kon­kre­ti­sie­ren, können folgende HTML-Attribute zum Einsatz kommen:

• shape: Mit shape-At­tri­bu­ten lassen sich die Formen der an­klick­ba­ren Ver­weis­flä­chen in einer Grafik bestimmen. Hierfür bieten sich rect für Rechtecke, circle für Kreise oder poly für Polygone an. Die Syntax für „rect“ lautet rect = x1,y1,x2,y2. Während x1 und y1 für die Ko­or­di­na­ten der oberen linken Ecke stehen, de­fi­nie­ren x2 und y2 die untere rechte Ecke. Die Syntax für circle lautet circle = xc,yc,radius. Die Syntax für Polygone ist poly = x1,y1,x2,y2,x3,y3 ….
• coords: Das coords-Attribut definiert die Ko­or­di­na­ten, die eine Ver­weis­flä­che begrenzen. Hierzu werden Gra­fik­be­rei­che mit Pixeln markiert, bei­spiels­wei­se mithilfe eines Grafik-Editors.
• href: Das href-Attribut er­mög­licht den Verweis auf die ver­link­ten internen oder externen URLs und Adressen.
• alt: Mit dem alt-Attribut lässt sich der Al­ter­na­tiv­text in­te­grie­ren, falls es zu Problemen mit dem Laden der Image Map kommt. Das ist bei­spiels­wei­se bei reinen Text­brow­sern oder zur Ge­währ­leis­tung einer bar­rie­re­frei­en Usability hilfreich.
• title: Das title-Attribut in­te­griert einen Kurztext mit wichtigen In­for­ma­tio­nen, die angezeigt werden, wenn Nut­ze­rin­nen und Nutzer über einen Bild­be­reich fahren.
• img: Mit dem img-Tag lässt sich eine Bilddatei in HTML-Dokumente einbinden und dar­stel­len.

Wie lässt sich eine Image Map in eine HTML-Seite in­te­grie­ren?

Sobald die Image Map kon­kre­ti­siert wurde, lässt sie sich mit dem HTML Tag <img> an der ge­wünsch­ten Position in eine Website ein­be­zie­hen. Um die ge­wünsch­te Image Map zu adres­sie­ren und verfügbar zu machen, nutzen Sie zu­sätz­lich das bereits erwähnte <map>-Element. Folgendes Beispiel zeigt die Ein­bin­dung ex­em­pla­risch:

<img src="strandbild.jpg" usemap="#image-map">
<map name="image-map">
    <area target="_blank" alt="Himmel" title="Himmel" href="https://example.com/himmel" coords="6,6,3264,573" shape="rect">
    <area target="_blank" alt="Meer" title="Meer" href="https://example.com/meer" coords="43,905,3252,586" shape="rect">
    <area target="_blank" alt="Strand" title="Strand" href="https://example.com/strand" coords="9,908,3255,1829" shape="rect">
</map>

Für das bei­spiel­haf­te Strand­bild wurden in diesem Fall drei an­klick­ba­re Bereiche definiert: Strand, Meer und Himmel – wer in die Bereiche klickt, wird au­to­ma­tisch auf die passenden Landing­pa­ges wei­ter­ge­lei­tet, die sich in einem neuen Fenster öffnen.

Close