In der digitalen Welt sind Bilder oft mehr als nur visuelle Elemente. Sie können auch interaktive Werkzeuge sein, die den Benutzer durch eine Website navigieren. Eine solche Technik, die es ermöglicht, verschiedene Bereiche eines Bildes mit unterschiedlichen Aktionen oder Links zu versehen, nennt man Imagemap. Stellen Sie sich eine Landkarte vor, bei der das Klicken auf verschiedene Städte Sie zu Informationen über diese Orte führt, oder ein Bild einer Gruppe von Personen, bei dem jeder Klick auf eine Person zu deren Profilseite springt.
Was ist eine Imagemap?
Eine Imagemap ist im Grunde ein Bild auf einer Webseite, das in mehrere anklickbare Bereiche unterteilt ist. Diese Bereiche werden als Hotspots bezeichnet. Wenn ein Benutzer auf einen dieser Hotspots klickt, wird eine vordefinierte Aktion ausgeführt, meistens das Öffnen eines Hyperlinks, genau wie bei einem normalen Textlink oder Button. Der Clou ist, dass diese Hotspots nicht sichtbar sind, bis der Benutzer mit der Maus darüber fährt (was oft durch Rollover-Effekte signalisiert wird) oder darauf klickt. Dies ermöglicht eine sehr intuitive und visuelle Form der Navigation.
Die Idee hinter Imagemaps ist nicht neu. Sie existieren seit den frühen Tagen des Internets und haben sich im Laufe der Zeit weiterentwickelt, um flexibler und benutzerfreundlicher zu werden.
Server-Side Imagemaps
Die ersten Imagemaps, die Unterstützung in Webbrowsern wie Mosaic (ab Version 1.1) fanden, waren sogenannte Server-Side Imagemaps. Bei dieser Methode sendet der Webbrowser die Koordinaten (X- und Y-Position relativ zur oberen linken Ecke des Bildes) des Klicks an den Server. Der Server ist dann dafür verantwortlich, basierend auf diesen Koordinaten zu entscheiden, welcher Inhalt zurückgegeben oder welche Aktion ausgeführt werden soll. Dies erforderte spezielle Logik auf dem Server, sei es durch Konfigurationsdateien, Datenbankabfragen oder das Vergleichen der Klickposition mit Maskenlayern auf dem Bild.
Die HTML-Implementierung einer Server-Side Imagemap ist relativ einfach, erfordert aber, dass der Server die entsprechende Verarbeitung übernimmt. Das <img>-Tag wird innerhalb eines <a>...</a>-Tags platziert und das <img>-Tag muss das Attribut ismap enthalten.
Beispielhafter HTML-Code (zur Veranschaulichung der Struktur, keine aktiven Links oder Bilder):<a href="/imagemapper"><img src="image.png" ismap></img></a>
Wenn der Benutzer auf dieses Bild klickt, hängt der Browser die X- und Y-Koordinaten (z. B. 3,9) an die URL des Ankers an, was zu einer URL wie /imagemapper?3,9 führt. Der Server muss diese Parameter auslesen und entsprechend reagieren. Wenn der Browser das ismap-Attribut nicht unterstützt, sollte keine Abfragezeichenfolge angehängt werden, und der Server sollte eine alternative Antwort liefern, z. B. eine reine Textnavigationsseite.
Server-Side Imagemaps sind heute weniger gebräuchlich, da sie zusätzliche Serverkonfiguration erfordern und die gesamte Verarbeitung auf dem Server stattfindet, was zu längeren Ladezeiten führen kann, da für jeden Klick eine Serveranfrage nötig ist.
Client-Side Imagemaps
Mit HTML 3.2 wurden Client-Side Imagemaps eingeführt, die die Verarbeitung der Klicks vollständig in den Browser verlagern. Dies eliminiert die Notwendigkeit spezieller Serverlogik und macht Imagemaps einfacher zu implementieren und potenziell schneller, da keine zusätzliche Serveranfrage für die Navigation erforderlich ist. Client-Side Imagemaps benötigen kein JavaScript für ihre Grundfunktion (obwohl JavaScript zur Verbesserung der Benutzererfahrung, z. B. für Rollover-Effekte, verwendet werden kann).
HTML-Implementierung
Eine Client-Side Imagemap besteht aus zwei Hauptteilen im HTML-Code:
- Dem eigentlichen Bild, eingebettet mit dem
<img>-Tag. Dieses Tag muss das Attributusemapenthalten, das auf den Namen der zu verwendenden Imagemap verweist. Der Wert vonusemapist ein Fragment-Identifier (beginnend mit '#'), der dem Namen des<map>-Elements entspricht. - Einem
<map>-Element, das die Imagemap definiert. Dieses Element muss einname-Attribut haben, das mit dem Wert desusemap-Attributs im<img>-Tag übereinstimmt. Innerhalb des<map>-Elements werden ein oder mehrere<area>-Elemente platziert. Jedes<area>-Element definiert einen einzelnen anklickbaren Hotspot innerhalb der Imagemap und verhält sich ähnlich wie ein<a>-Tag, indem es angibt, welche URL beim Klicken auf diesen Bereich geöffnet werden soll (über dashref-Attribut).
Ein wichtiges Attribut für <area>-Elemente ist shape, das die Form des Hotspots definiert. Die möglichen Werte sind:
rect: Definiert ein Rechteck. Erfordert vier Koordinaten: "x1,y1,x2,y2", wobei (x1,y1) die obere linke und (x2,y2) die untere rechte Ecke des Rechtecks sind.circle: Definiert einen Kreis. Erfordert drei Werte: "x,y,radius", wobei (x,y) das Zentrum des Kreises und "radius" der Radius ist.poly: Definiert ein Polygon (Vieleck). Erfordert eine beliebige gerade Anzahl von Koordinatenpaaren: "x1,y1,x2,y2,...,xn,yn", die die Eckpunkte des Polygons definieren. Das Polygon wird geschlossen, indem der letzte Punkt mit dem ersten verbunden wird.
Die Koordinaten werden immer relativ zur oberen linken Ecke des Bildes (Position 0,0) angegeben.
Für die Barrierefreiheit und Usability sind die Attribute alt und title bei <area>-Elementen sehr wichtig. Das title-Attribut wird oft als Tooltip angezeigt, wenn der Benutzer mit der Maus über den Hotspot fährt. Das alt-Attribut ist entscheidend für Screenreader-Software, die den Link für sehbehinderte Benutzer beschreiben kann. In vielen Fällen ist die Angabe eines sinnvollen alt-Attributs nicht nur eine gute Praxis, sondern kann auch eine rechtliche oder vertragliche Anforderung sein.
Beispielhafter HTML-Code (zur Veranschaulichung der Struktur, keine aktiven Links oder Bilder):<img src="bild.jpg" alt="Übersichtskarte" usemap="#meinekarte"></img><map name="meinekarte"> <area shape="rect" coords="10,10,100,50" href="/seite1.html" alt="Bereich 1" title="Klicken Sie hier für Bereich 1"></area> <area shape="circle" coords="150,150,25" href="/seite2.html" alt="Bereich 2" title="Klicken Sie hier für Bereich 2"></area> <area shape="poly" coords="200,10,250,30,220,60" href="/seite3.html" alt="Bereich 3" title="Klicken Sie hier für Bereich 3"></area></map>
Alternativen (CSS/SVG)
Neben den nativen HTML-Imagemaps gibt es andere Techniken, um Bilder interaktiv zu gestalten. Ein moderner Ansatz ist die Überlagerung von Links oder anklickbaren Elementen über ein Bild mithilfe von CSS und absoluter Positionierung. Diese Methode eignet sich gut für rechteckige Hotspots und kann bei der Bewältigung von Responsivitäts-Problemen helfen, insbesondere auf mobilen Geräten wie iPhones, bei denen die Skalierung reiner HTML-Imagemaps manchmal nicht korrekt funktioniert.
Eine weitere Alternative bietet das Scalable Vector Graphics (SVG) Format. Da SVG von Natur aus Vektorgrafiken beschreibt und eigene Mechanismen für Hyperlinks und komplexere Interaktivität bietet, sind traditionelle Imagemap-Techniken bei der Arbeit mit SVG-Bildern oft nicht notwendig. Man kann Elemente direkt innerhalb des SVG-Codes verlinken.
Erstellung von Imagemaps
Das manuelle Erstellen von Client-Side Imagemaps, insbesondere mit komplexen Polygon-Formen, kann zeitaufwendig und fehleranfällig sein. Es erfordert das genaue Ermitteln der Koordinaten für jeden Hotspot, was bei vielen oder unregelmäßig geformten Bereichen mühsam ist. Daher wurden spezielle Werkzeuge entwickelt, um diesen Prozess zu vereinfachen.
Viele Webdesign-Software und Grafikprogramme bieten integrierte oder Plugin-Funktionen zur Erstellung von Imagemaps. Beispiele hierfür sind:
- Adobe Dreamweaver
- KImageMapEditor (für KDE)
- Das Imagemap-Plugin in GIMP
- Der dedizierte ImageMap-Editor in der freien Office-Suite LibreOffice
Diese Editoren ermöglichen es Designern, Hotspots visuell auf dem Bild zu zeichnen (ähnlich wie beim Erstellen von Formen in einem Vektorgrafikprogramm) und generieren dann automatisch den entsprechenden HTML-Code für die <map>- und <area>-Elemente. Dies spart erheblich Zeit und reduziert die Fehlerwahrscheinlichkeit.
Usability und Barrierefreiheit
Während Imagemaps eine visuell ansprechende Form der Navigation bieten können, bergen sie auch Herausforderungen hinsichtlich Usability und Barrierefreiheit. Das Hauptproblem ist oft die sogenannte "Mystery Meat Navigation", bei der nicht offensichtlich ist, welche Teile des Bildes anklickbar sind. Benutzer könnten frustriert sein, wenn sie zufällig klicken müssen, um interaktive Bereiche zu finden.
Um dies zu verbessern, sollten Hotspots entweder visuell hervorgehoben werden (z. B. durch Rollover-Effekte, die den Bereich beim Überfahren mit der Maus verändern oder einen Rahmen anzeigen) oder es sollte eine klare visuelle oder textuelle Anweisung geben, dass das Bild interaktiv ist. Auch das Anzeigen des title-Attributs als Tooltip beim Überfahren hilft dem Benutzer zu verstehen, wohin ein Klick führt.
Wie bereits erwähnt, ist das alt-Attribut für die Barrierefreiheit unerlässlich. Screenreader können Bilder nicht sehen, aber sie können das alt-Attribut lesen. Ein beschreibendes alt-Attribut für jeden Hotspot ermöglicht es sehbehinderten Benutzern, die Funktion des Hotspots zu verstehen und zu navigieren. Das Fehlen von alt-Text kann Imagemaps für diese Benutzergruppe unzugänglich machen.
Server-Side vs. Client-Side: Ein Vergleich
Hier ist ein kurzer Vergleich der beiden Haupttypen von Imagemaps:
| Merkmal | Server-Side Imagemap | Client-Side Imagemap |
|---|---|---|
| Verarbeitungsort | Server | Browser (Client) |
| HTML-Attribute | <img ismap> innerhalb von <a href="..."> | <img usemap="#..."> verknüpft mit <map name="..."> und <area> Elementen |
| Server-Logik benötigt | Ja, zur Verarbeitung der Koordinaten | Nein, Verarbeitung im Browser |
| Unterstützte Formen | Abhängig von der Server-Logik, oft komplexere Formen möglich | Standardformen: Rechteck, Kreis, Polygon |
| Performance bei Klick | Erfordert Serveranfrage (potenziell langsamer) | Direkte Navigation im Browser (schneller) |
| Erstellung | HTML-Code + Serverkonfiguration/Skripte | HTML-Code (oft mit Hilfe von Editoren) |
| Barrierefreiheit | Kann schwieriger umzusetzen sein | Gut umsetzbar mit alt- und title-Attributen |
Häufig gestellte Fragen (FAQ)
Hier beantworten wir einige gängige Fragen zum Thema Imagemaps:
Was genau ist ein Hotspot bei einer Imagemap?
Ein Hotspot ist ein spezifischer, definierter Bereich innerhalb eines Bildes in einer Imagemap, der anklickbar ist. Jeder Hotspot kann mit einer eigenen URL oder Aktion verknüpft sein. Er ist der interaktive Teil des Bildes.
Warum sollte ich eine Imagemap verwenden?
Imagemaps eignen sich hervorragend, um visuell komplexe Inhalte wie Karten, Diagramme, Infografiken oder Produktbilder interaktiv zu gestalten. Sie ermöglichen es, verschiedene Bereiche eines Bildes direkt mit relevanten Informationen oder Seiten zu verknüpfen, was die Navigation intuitiver und ansprechender machen kann als separate Textlinks.
Was ist der Unterschied zwischen Server-Side und Client-Side Imagemaps?
Der Hauptunterschied liegt darin, wo die Verarbeitung des Klicks stattfindet. Bei Server-Side Imagemaps sendet der Browser nur die Klickkoordinaten an den Server, der dann entscheidet, was zu tun ist. Bei Client-Side Imagemaps sind alle Informationen über die Hotspots und ihre Links im HTML-Code der Seite enthalten, und der Browser verarbeitet den Klick lokal.
Kann ich jede Form als Hotspot definieren?
Bei Client-Side Imagemaps können Sie Hotspots in Form von Rechtecken (rect), Kreisen (circle) und Polygonen (poly) definieren. Mit Polygonen können Sie prinzipiell jede beliebige Freiformfläche nachbilden, indem Sie genügend Eckpunkte setzen.
Wie erstelle ich eine Imagemap?
Sie können eine Imagemap manuell erstellen, indem Sie die Koordinaten der gewünschten Hotspots ermitteln und den entsprechenden HTML-Code für das <map>-Element mit den <area>-Elementen schreiben. Wesentlich einfacher ist jedoch die Verwendung eines speziellen Imagemap-Editors, der oft in Webdesign-Software oder Grafikprogrammen integriert ist. Diese Tools ermöglichen es Ihnen, die Bereiche visuell zu zeichnen, und generieren den Code automatisch.
Sind Imagemaps mobilfreundlich (responsive)?
Standard-HTML-Imagemaps können auf responsiven Websites Probleme bereiten, da die Hotspot-Koordinaten feste Pixelwerte sind und sich nicht automatisch an die Größe des Bildes anpassen, wenn es skaliert wird. Es gibt Techniken (oft unter Verwendung von JavaScript), um Imagemaps responsiv zu machen, oder man greift auf Alternativen wie CSS-basierte Überlagerungen oder SVG zurück.
Fazit
Imagemaps sind eine bewährte Technik im Webdesign, um Bilder von statischen Elementen in interaktive Navigationstools zu verwandeln. Während Server-Side Imagemaps historisch interessant sind, dominieren heute Client-Side Imagemaps dank ihrer einfacheren Implementierung und besseren Performance. Die Erstellung wird durch spezielle Editoren erheblich vereinfacht.
Es ist jedoch entscheidend, bei der Verwendung von Imagemaps auf die Usability und insbesondere die Barrierefreiheit zu achten. Klare visuelle Hinweise auf Hotspots und die sorgfältige Verwendung von alt-Attributen sind unerlässlich, um sicherzustellen, dass alle Benutzer, unabhängig von ihren Fähigkeiten oder verwendeten Geräten, die Imagemap effektiv nutzen können. Trotz neuerer Methoden wie CSS-Overlays oder SVG-basierter Interaktivität bleiben klassische Client-Side Imagemaps eine gültige und nützliche Option für viele Anwendungsfälle im Web.
Hat dich der Artikel Imagemaps: Bilder interaktiv gestalten interessiert? Schau auch in die Kategorie Ogólny rein – dort findest du mehr ähnliche Inhalte!