HTML Image Map: Klickbare Grafiken mit dem map-Tag

Eine HTML Image Map bezeichnet Website-Grafiken oder Videos, die über mehrere klickbare Bereiche verfügen, die zu internen oder externen URLs führen. Die sogenannten verweissensitiven Bereiche einer Image Map werden mit ausgewählten Koordinaten erstellt und mit zugehörigen URLs oder Webadressen verknüpft.

Was ist eine HTML Image Map?

HTML Image Maps sind klickbare Grafiken, die die Benutzerfreundlichkeit und Interaktivität verbessern. Genauer gesagt lassen sich mithilfe von HTML Image Maps Grafiken und Videos in einem HTML-Dokument mit mehreren verlinkten und anklickbaren Bereichen versehen. Bei integrierten Verweisflächen kann es sich um Unterseiten, Hyperlinks zu internen oder externen URLs oder Downloads handeln. Sobald Nutzerinnen und Nutzer auf die verlinkten Elemente klicken, lassen sich gewünschte Inhalte aufrufen oder Aktionen auslösen.

Zur Erstellung von Image Maps kommt das HTML-Tag <map> zum Einsatz. Zur Einbindung der fertigen Image Map dient wiederum das HTML-img-Tag.

Wer seine HTML Image Map nicht selbst erstellen will, kann auf Image Map Generatoren zurückgreifen. Bei diesen Online-Tools laden Sie einfach das gewünschte Bild hoch und legen anschließend die gewünschten Linkziele in Bildbereichen fest.

Wofür kann eine HTML Image Map genutzt werden?

Eine Image Map lässt sich in beliebige HTML-Dokumente integrieren, sobald Sie die jeweiligen Verweisflächen definiert haben. Die Stärke der Maps liegt in der Möglichkeit, mehrere beliebige Ziele innerhalb einer Grafik oder eines Videos zu verlinken. Zu den vielfältigen Einsatzmöglichkeiten und Anwendungsbereichen von HTML Image Maps zählen unter anderem:

• Landkarten mit anklickbaren Verweisflächen für Regionen, Städte, Firmenniederlassungen oder Servicestationen
• Rezeptbilder mit Zusatzinformationen zu abgebildeten Zutaten
• Werbebanner mit unterschiedlichen verlinkten Produkten, Kategorien oder Services
• Eingeblendete Zusatzinformationen oder Werbung in Videos
• Eine Website als Image Map mit mehreren Navigationselementen
• Anzeigen von verschiedenen Spielmodi, Funktionen 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. Zusätzlich ist das Attribut name zu verwenden, damit die Map referenziert werden kann. Vereinfacht gesagt lässt sich das gewünschte Ziel dank dem Map-Namen in einer Grafik oder einem Video verankern, verlinken und adressieren. Es folgen weitere Anweisungen zu den Koordinaten der verlinkten Verweisflächen.

Eine HTML Image Map lässt sich an jeder gewünschten Stelle eines HTML-Dokuments platzieren. Hierzu legen Sie Bereiche und Koordinaten (coords) fest, mit denen Sie die Position, die Größe und die Form der Verweisfläche konkretisieren. Bereiche lassen sich in Form von Rechtecken, Polygonen oder Kreisen in einer Grafik platzieren. Welche Koordinaten Sie verwenden, hängt von der Form der Verweisfläche ab.

Mit dem HTML-Attribut <area> können Sie wiederum individuelle Bereiche der Image Map definieren. Um eine Image Map zu verwenden, ist mindestens ein area-Attribut erforderlich. Um die Eigenschaften der Image Map und ihrer individuellen Verweisflächen zu konkretisieren, können folgende HTML-Attribute zum Einsatz kommen:

• shape: Mit shape-Attributen lassen sich die Formen der anklickbaren Verweisflä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 Koordinaten der oberen linken Ecke stehen, definieren 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 Koordinaten, die eine Verweisfläche begrenzen. Hierzu werden Grafikbereiche mit Pixeln markiert, beispielsweise mithilfe eines Grafik-Editors.
• href: Das href-Attribut ermöglicht den Verweis auf die verlinkten internen oder externen URLs und Adressen.
• alt: Mit dem alt-Attribut lässt sich der Alternativtext integrieren, falls es zu Problemen mit dem Laden der Image Map kommt. Das ist beispielsweise bei reinen Textbrowsern oder zur Gewährleistung einer barrierefreien Usability hilfreich.
• title: Das title-Attribut integriert einen Kurztext mit wichtigen Informationen, die angezeigt werden, wenn Nutzerinnen und Nutzer über einen Bildbereich fahren.
• img: Mit dem img-Tag lässt sich eine Bilddatei in HTML-Dokumente einbinden und darstellen.

Wie lässt sich eine Image Map in eine HTML-Seite integrieren?

Sobald die Image Map konkretisiert wurde, lässt sie sich mit dem HTML Tag <img> an der gewünschten Position in eine Website einbeziehen. Um die gewünschte Image Map zu adressieren und verfügbar zu machen, nutzen Sie zusätzlich das bereits erwähnte <map>-Element. Folgendes Beispiel zeigt die Einbindung exemplarisch:

<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 beispielhafte Strandbild wurden in diesem Fall drei anklickbare Bereiche definiert: Strand, Meer und Himmel – wer in die Bereiche klickt, wird automatisch auf die passenden Landingpages weitergeleitet, die sich in einem neuen Fenster öffnen.