In der Frühzeit des Internets waren die grafischen Möglichkeiten im Web recht begrenzt. Dennoch wuchs der Wunsch, Webseiten visuell ansprechender und interaktiver zu gestalten. HTML bot damals noch nicht die Flexibilität für komplexe Layouts oder aufwendig gestaltete Buttons, wie es heute dank CSS möglich ist. Entwickler suchten nach Wegen, um detaillierte Grafiken, die oft in professionellen Programmen erstellt wurden, auf Webseiten nutzbar zu machen und gleichzeitig Interaktion zu ermöglichen. Aus diesem Bedürfnis heraus entstand die Idee der Image Maps.
Die grundlegende Idee war einfach: Ein einziges Bild enthielt verschiedene grafische Elemente wie Navigationsbuttons, Banner oder andere klickbare Bereiche. Je nachdem, auf welchen Teil dieses Bildes ein Benutzer klickte, sollte er zu einer anderen Webseite gelangen. Stellen Sie sich ein Bild vor, das wie ein Navigationsmenü aussieht, mit Texten wie 'Start', 'Über uns' oder 'Produkte'. Ein Klick auf 'Start' führte zur Startseite, ein Klick auf 'Über uns' zur entsprechenden Seite usw. Diese Technik ermöglichte es, komplexe visuelle Designs als Ganzes darzustellen und gleichzeitig Navigationselemente darin zu integrieren.
Die Anfänge: Serverseitige Image Maps
Die erste Implementierung dieser Idee waren die serverseitigen Image Maps. Hierbei wurde ein Bild (<img>) mit einem Link (<a>) umschlossen. Zusätzlich erhielt das <img>-Element das boolesche Attribut ismap. Wenn der Benutzer irgendwo auf dieses Bild klickte, wurde nicht nur der in href angegebene Link aufgerufen, sondern die Koordinaten des Klicks (relativ zur oberen linken Ecke des Bildes) wurden als Teil des URL-Parameters an den Server gesendet.
Der Server musste dann so konfiguriert sein, dass er diese Koordinaten interpretieren konnte. Eine spezielle Software auf dem Server analysierte die übermittelten X- und Y-Koordinaten und ermittelte anhand vordefinierter Bereiche, welcher Teil des Bildes angeklickt wurde. Basierend auf dieser Analyse lieferte der Server die entsprechende Zielseite zurück. War beispielsweise der Bereich mit den Koordinaten für den 'Start'-Button angeklickt worden, sendete der Server die Startseite an den Browser des Benutzers.
Probleme der serverseitigen Lösung
Obwohl serverseitige Image Maps das Problem der interaktiven Bilder zunächst lösten, waren sie mit erheblichen Nachteilen verbunden:
- Keine visuellen Hinweise: Für den Benutzer gab es keinerlei Indikation, welche Bereiche des Bildes klickbar waren. Das gesamte Bild war technisch anklickbar, aber nur bestimmte Klicks führten zu sinnvollen Aktionen. Es gab keine Hover-Effekte oder unterschiedliche Cursor-Formen für die Hotspots.
- Schwierigkeiten für Suchmaschinen: Web-Crawler konnten die im Bild versteckten Links nicht erkennen. Da die Link-Informationen (welche Koordinaten zu welchem Link gehören) ausschließlich auf dem Server verarbeitet wurden und nicht im HTML-Code ersichtlich waren, konnten Suchmaschinen den Inhalt hinter diesen Bildlinks nicht indexieren. Dies beeinträchtigte die Auffindbarkeit der verlinkten Seiten.
- Serverlast: Jeder Klick auf das Bild erforderte eine Kommunikation mit dem Server zur Verarbeitung der Koordinaten und zur Bestimmung des Ziels. Bei hohem Verkehrsaufkommen konnte dies den Server belasten.
- Komplexe Konfiguration: Die serverseitige Logik zur Koordinatenverarbeitung war oft aufwendig einzurichten und zu warten.
Trotz dieser Nachteile wird das ismap-Attribut aus Gründen der Abwärtskompatibilität von modernen Browsern immer noch unterstützt. Es ist jedoch für neue Projekte absolut veraltet.
Der Übergang: Clientseitige Image Maps
Um die Probleme der serverseitigen Image Maps zu beheben, wurde ein neuer Ansatz entwickelt: die clientseitigen Image Maps. Wie der Name schon sagt, wird bei dieser Methode die gesamte Logik zur Zuordnung von Koordinaten zu Links auf dem Client, also im Webbrowser selbst, verarbeitet. Der Server ist nicht mehr direkt an der Bestimmung des Ziels eines Klicks beteiligt.
Dies wurde durch die Einführung von zwei neuen HTML-Elementen ermöglicht: <map> und <area>.
Vorteile der clientseitigen Lösung
Die clientseitigen Image Maps brachten signifikante Verbesserungen:
- Suchmaschinenfreundlichkeit: Die Link-Informationen sind direkt im HTML-Code enthalten (innerhalb der
<area>-Elemente). Web-Crawler können diese Informationen problemlos auslesen und die verlinkten Seiten indexieren. - Gezielte Klickbereiche: Es ist nicht mehr das gesamte Bild anklickbar. Nur die explizit definierten Bereiche (Hotspots) reagieren auf Klicks.
- Reduzierte Serverlast: Die gesamte Koordinatenverarbeitung und Link-Auflösung findet im Browser des Benutzers statt, was den Server entlastet.
- Visuelle Rückmeldung: Browser können für die definierten Hotspots visuelle Hinweise geben, z.B. durch Ändern des Mauscursors in eine Hand.
Aufbau einer clientseitigen Image Map
Eine clientseitige Image Map besteht aus zwei Hauptkomponenten im HTML:
1. Dem Bild selbst (<img>).
2. Einem <map>-Element, das die klickbaren Bereiche definiert.
Um das Bild mit der Image Map zu verknüpfen, erhält das <img>-Element das Attribut usemap. Der Wert dieses Attributs ist ein Fragment-Identifier (beginnend mit #), der auf das name-Attribut des zugehörigen <map>-Elements verweist.
Beispiel:
<img src="meinbild.jpg" alt="Beschreibung des Bildes" usemap="#meinekarte"> <map name="meinekarte"> <!-- Hier kommen die <area> Elemente --> </map>Das <map>-Element selbst ist ein Container, der die Definitionen der Hotspots enthält. Es benötigt das name-Attribut, um eindeutig identifizierbar zu sein und vom usemap-Attribut des Bildes referenziert werden zu können. Das id-Attribut kann ebenfalls verwendet werden, sollte aber denselben Wert wie das name-Attribut haben.
Die Bereiche definieren: Das <area> Element
Innerhalb des <map>-Elements werden die einzelnen klickbaren Bereiche, die sogenannten Hotspots, mit dem <area>-Element definiert. Das <area>-Element ist ein Leerelement (void element) und kann nur innerhalb eines <map>-Elements verwendet werden.
Die Form und Position eines Hotspots werden hauptsächlich durch zwei Attribute des <area>-Elements bestimmt: shape und coords.
shape: Definiert die geometrische Form des Hotspots. Mögliche Werte sind:rect: Ein Rechteck.circle: Ein Kreis.poly: Ein Polygon (eine Form mit drei oder mehr Eckpunkten).default: Der gesamte Bereich des Bildes (Standardwert, wennshapefehlt).
coords: Definiert die Koordinaten, die die Form und Position des Hotspots beschreiben. Die Bedeutung der Koordinaten hängt vom Wert desshape-Attributs ab. Alle Koordinaten sind relativ zur oberen linken Ecke des Bildes (0,0) in Pixeln angegeben.
Definitionen der coords-Attribute
Die Syntax des coords-Attributs variiert je nach gewählter Form:
| Shape | Format von coords | Beschreibung |
|---|---|---|
rect | x1,y1,x2,y2 | (x1, y1) sind die Koordinaten der oberen linken Ecke des Rechtecks. (x2, y2) sind die Koordinaten der unteren rechten Ecke. |
circle | x,y,r | (x, y) sind die Koordinaten des Mittelpunkts des Kreises. r ist der Radius des Kreises. |
poly | x1,y1,x2,y2,...,xn,yn | Eine Liste von X- und Y-Koordinatenpaaren für jeden Eckpunkt des Polygons. Es sind mindestens drei Punkte erforderlich. Die Punkte werden in der Reihenfolge verbunden, in der sie angegeben sind, und der letzte Punkt wird mit dem ersten verbunden, um die Form zu schließen. |
default | (Nicht erforderlich) | Dieser Bereich deckt das gesamte Bild ab. |
Die Koordinatenpaare werden durch Kommas getrennt.
Wichtige Attribute des <area> Elements
Neben shape und coords gibt es weitere wichtige Attribute für das <area>-Element:
href: Dieses Attribut gibt die URL der Zielseite an, zu der der Benutzer weitergeleitet wird, wenn er auf diesen Hotspot klickt. Es funktioniert genau wie dashref-Attribut eines<a>-Elements. Ein<area>-Element ohnehrefist nicht klickbar und wird oft verwendet, um Bereiche von anderen Hotspots auszunehmen, wenn sich diese überlappen.alt: Dieses Attribut bietet einen alternativen Text für den Hotspot. Es ist extrem wichtig für die Barrierefreiheit, insbesondere für Benutzer von Screenreadern. Wenn ein Screenreader auf eine Image Map trifft, liest er den alternativen Text für jeden definierten Hotspot vor. Dies hilft sehbehinderten Benutzern zu verstehen, wohin die einzelnen Bereiche verlinken. Für Suchmaschinen dient deralt-Text ähnlich wie der Ankertext eines normalen Links und hilft, den Inhalt der Zielseite zu verstehen. Es sollte immer verwendet werden, um den Zweck des Links klar zu beschreiben.title: Dieses Attribut kann einen Tooltip-Text definieren, der angezeigt wird, wenn der Benutzer mit der Maus über den Hotspot fährt. Dies kann für Benutzer hilfreich sein, um schnell zu sehen, wohin ein Bereich führt, bevor sie klicken.
Die Verwendung von alt ist nahezu obligatorisch, während title eine nützliche Ergänzung für die Benutzerfreundlichkeit ist.
Ein praktisches Beispiel (Konzeptionell)
Stellen Sie sich ein Werbebanner-Bild vor, das drei klickbare Bereiche enthält:
- Ein Logo auf der linken Seite, das zur Startseite verlinken soll.
- Ein Button in der Mitte mit der Aufschrift 'Kurse entdecken', der zur Kursübersicht führen soll.
- Ein kleines Dreieck in der oberen rechten Ecke mit 'Über uns', das zur Über-uns-Seite verlinken soll.
Das Bild hat eine bestimmte Größe, sagen wir 600 Pixel breit und 250 Pixel hoch. Wir müssten nun die Koordinaten für jeden dieser Bereiche ermitteln:
- Für das Logo (Rechteck): Wir messen die Koordinaten der oberen linken und unteren rechten Ecke des Logo-Bereichs. Sagen wir, diese sind (40, 30) und (180, 70).
- Für den 'Kurse entdecken'-Button (Kreis): Wir finden den Mittelpunkt des Buttons und messen seinen Radius. Sagen wir, der Mittelpunkt ist bei (450, 180) und der Radius beträgt 60 Pixel.
- Für das 'Über uns'-Dreieck (Polygon): Wir identifizieren die drei Eckpunkte des Dreiecks und messen ihre Koordinaten. Sagen wir, diese sind (550, 0), (600, 0) und (600, 50).
Mit diesen Informationen würden wir die HTML-Struktur wie folgt aufbauen:
<img src="werbebanner.jpg" alt="Werbebanner für unsere Kurse" usemap="#bannerkarte"> <map name="bannerkarte"> <area shape="rect" coords="40,30,180,70" href="/" alt="Zur Startseite" title="Startseite"> <area shape="circle" coords="450,180,60" href="/kurse/" alt="Kurse entdecken" title="Kurse"> <area shape="poly" coords="550,0,600,0,600,50" href="/ueber-uns/" alt="Über uns" title="Über uns"> </map>Dieses Beispiel zeigt, wie die verschiedenen Formen und Attribute zusammenarbeiten, um ein interaktives Bild zu erstellen.
Werkzeuge: Image Map Generatoren
Das manuelle Ermitteln der Koordinaten für komplexe Formen oder viele Hotspots kann sehr mühsam sein. Glücklicherweise gibt es spezielle Tools, sogenannte Image Map Generatoren. Diese Online-Tools oder Desktop-Anwendungen ermöglichen es Ihnen, das Bild hochzuladen und dann mit der Maus die gewünschten klickbaren Bereiche (Rechtecke, Kreise, Polygone) direkt auf dem Bild zu zeichnen. Nach dem Zeichnen generiert das Tool automatisch den entsprechenden HTML-Code für das <map>-Element mit allen <area>-Definitionen und den korrekten coords-Werten. Dies spart enorm viel Zeit und reduziert Fehler bei der manuellen Eingabe.
Wichtige Hinweise und Überlegungen
Eine Map für mehrere Bilder
Es ist technisch möglich, dass mehrere <img>-Elemente auf dasselbe <map>-Element verweisen, indem sie denselben Wert im usemap-Attribut verwenden. Dies macht jedoch nur Sinn, wenn alle diese Bilder identisch sind oder zumindest dieselben Hotspot-Bereiche an denselben relativen Koordinaten aufweisen. In der Praxis ist dies selten der Fall.
Inhalt im <map> Element
Obwohl das <map>-Element hauptsächlich als Container für <area>-Elemente dient, kann es laut HTML-Standard auch andere Elemente enthalten, wie z.B. Paragraphen (<p>) oder Links (<a>). Dies wird jedoch selten genutzt und kann die Struktur unübersichtlich machen. Die Hauptfunktion des <map>-Elements ist die Gruppierung der <area>-Elemente.
Die Reihenfolge der <area> Elemente
Die Reihenfolge, in der die <area>-Elemente innerhalb des <map>-Elements aufgeführt sind, ist relevant. Dies betrifft zum einen die Navigationsreihenfolge per Tastatur (Tabulator-Taste): Das erste <area> in der Liste erhält zuerst den Fokus, dann das zweite usw. Zum anderen ist die Reihenfolge wichtig, wenn sich Hotspots überlappen. Das zuerst definierte <area>-Element liegt sozusagen 'unter' den später definierten. Wenn sich zwei Hotspots überlappen, wird der Klick vom obersten (zuletzt definierten im HTML-Code) Hotspot abgefangen. Dies kann genutzt werden, um beispielsweise bestimmte Bereiche von einem größeren Hotspot auszuschließen, indem man einen nicht klickbaren <area>-Bereich (ohne href) über den auszuschließenden Bereich legt und diesen nicht klickbaren Bereich *nach* dem größeren, klickbaren Bereich im HTML definiert.
Responsivität von Image Maps
Ein großer Nachteil nativer HTML Image Maps ist, dass sie von Haus aus nicht responsiv sind. Die in coords angegebenen Koordinaten sind absolute Pixelwerte, die sich auf die feste Größe des Bildes beziehen. Wenn das Bild skaliert wird (z.B. auf einem kleineren Bildschirm), bleiben die definierten Hotspot-Bereiche an ihren ursprünglichen Pixelkoordinaten und passen sich nicht an die neue Bildgröße an. Dies führt dazu, dass die klickbaren Bereiche nicht mehr korrekt über den visuellen Elementen im skalierten Bild liegen.
Um Image Maps responsiv zu machen, ist zusätzliche Programmierung erforderlich, in der Regel mit JavaScript. Ein Skript müsste die aktuelle Größe des Bildes erkennen und die Koordinaten jedes <area>-Elements proportional skalieren, wenn sich die Bildgröße ändert (z.B. beim Ändern der Fenstergröße). Dies erfordert komplexeren Code und ist keine eingebaute Funktion von HTML allein.
Häufig gestellte Fragen
Sind HTML Image Maps heutzutage noch gebräuchlich?
Ja, clientseitige Image Maps werden immer noch verwendet, wenn auch nicht so häufig wie früher. Sie können nützlich sein für spezielle Anwendungsfälle wie interaktive Infografiken, Karten oder komplexe Diagramme, bei denen es erforderlich ist, unregelmäßige Formen oder mehrere Hotspots auf einem einzigen Bild zu definieren. Für einfache Buttons oder Navigationsmenüs werden heute in der Regel CSS und semantischere HTML-Strukturen bevorzugt.
Wie erstelle ich eine HTML Image Map?
Sie benötigen ein <img>-Element mit dem usemap-Attribut, das auf den name eines <map>-Elements verweist. Innerhalb des <map>-Elements definieren Sie die klickbaren Bereiche mit <area>-Elementen, wobei Sie mit den Attributen shape und coords die Form und Position sowie mit href, alt und title das Ziel und die Beschreibung festlegen. Image Map Generatoren können bei der Ermittlung der Koordinaten helfen.
Können Image Maps responsive sein?
HTML Image Maps sind nativ nicht responsiv. Die Koordinaten sind fest. Um sie responsiv zu machen, ist der Einsatz von JavaScript erforderlich, das die Koordinaten dynamisch an die Größe des skalierten Bildes anpasst.
Was ist der Unterschied zwischen serverseitigen und clientseitigen Image Maps?
Bei serverseitigen Image Maps werden die Klick-Koordinaten an den Server gesendet, der das Ziel bestimmt. Bei clientseitigen Image Maps wird die Zuordnung von Koordinaten zu Zielen vollständig im Browser des Benutzers mithilfe der Elemente <map> und <area> verarbeitet.
Fazit
HTML Image Maps, insbesondere die clientseitige Variante mit den Elementen <map> und <area>, waren ein wichtiger Schritt in der Entwicklung interaktiver Webseiten. Sie ermöglichten es, komplexe visuelle Elemente auf Bildern mit Hyperlinks zu versehen, was in den frühen Tagen des Webs eine Herausforderung darstellte. Obwohl moderne Webdesign-Techniken wie CSS und JavaScript für die meisten interaktiven Elemente und Layouts flexiblere und oft zugänglichere Lösungen bieten, haben Image Maps immer noch ihre Nische.
Für spezifische Anwendungsfälle, bei denen unregelmäßige klickbare Bereiche auf einem statischen Bild erforderlich sind (wie bei technischen Diagrammen, anatomischen Illustrationen oder historischen Karten), können Image Maps eine praktikable Lösung sein. Es ist jedoch wichtig, ihre Einschränkungen hinsichtlich der Responsivität und die Notwendigkeit, das alt-Attribut für die Barrierefreiheit und Suchmaschinenoptimierung sorgfältig zu pflegen, zu berücksichtigen. Das Verständnis, wie Image Maps funktionieren, bietet auch einen interessanten Einblick in die Geschichte der Webentwicklung und die Evolution der Interaktionsmöglichkeiten im Browser.
Hat dich der Artikel Klickbare Bildbereiche: HTML Image Maps interessiert? Schau auch in die Kategorie Ogólny rein – dort findest du mehr ähnliche Inhalte!