Eine Hitmap auf einem Bild hinzufügen

Hier erklären wir, wie Sie eine Bildkarte einrichten und einige Nachteile, die Sie zuerst beachten sollten.

Hier sind einige Dinge, die Sie wissen müssen
Voraussetzungen: Sie sollten bereits wissen, wie man ein grundlegendes HTML-Dokument erstellt und wie man zugängliche Bilder auf einer Webseite hinzufügt.
Ziel: Lernen, wie man verschiedene Bereiche eines Bildes so gestaltet, dass sie zu unterschiedlichen Seiten verlinken.

Warnung: Dieser Artikel behandelt nur clientseitige Bildkarten. Verwenden Sie keine serverseitigen Bildkarten, die den Benutzer benötigen, eine Maus zu haben.

Bildkarten und ihre Nachteile

Wenn Sie ein Bild in ein <a>-Element einbetten, verlinkt das gesamte Bild zu einer Webseite. Eine Bildkarte hingegen enthält mehrere aktive Bereiche (genannt „Hotspots“), die jeweils zu einer anderen Ressource verlinken.

Früher waren Bildkarten ein beliebtes Navigationsmittel, aber es ist wichtig, deren Leistungs- und Zugänglichkeitsauswirkungen gründlich zu berücksichtigen.

Warnung: Mehrere Bilder, die auf dieselbe Bildkarte verweisen, können zu unerwartetem Browserverhalten führen und die Benutzerfreundlichkeit und Zugänglichkeit stark beeinträchtigen. Zum Beispiel, wenn ein Benutzer in Safari und Chromium-basierten Browsern mit der Tastatur ein Bild mit einer wiederverwendeten Bildkarte navigiert, werden spätere Bildinstanzen, die dieselbe Bildkarte verwenden, vollständig übersprungen. In Firefox erhalten alle Bildkarten gleichzeitig den Tastaturfokus, und wenn der Benutzer mit der Tastatur an dem Bild vorbeinavigiert, ist das nächste fokussierte Element dasjenige nach der letzten Bildinstanz, wodurch effektiv alles zwischen den beiden Bildern übersprungen wird.

Textlinks (vielleicht mit CSS gestaltet) sind Bildkarten aus mehreren Gründen vorzuziehen: Textlinks sind leicht, wartbar, oft SEO-freundlicher und unterstützen Zugänglichkeitsanforderungen (z. B. Screenreader, textbasierte Browser, Übersetzungsdienste).

Anleitung zum korrekten Einfügen einer Bildkarte

Schritt 1: Das Bild

Nicht jedes Bild ist akzeptabel.

  • Das Bild muss verdeutlichen, was passiert, wenn Benutzer Bildlinks folgen. alt-Text ist selbstverständlich obligatorisch, aber viele Menschen sehen ihn nie.
  • Das Bild muss klar zeigen, wo Hotspots beginnen und enden.
  • Hotspots müssen groß genug sein, um bequem angetippt zu werden, unabhängig von der Ansichtshöhe. Wie groß ist groß genug? 72 × 72 CSS-Pixel sind ein gutes Minimum, mit zusätzlichen großzügigen Abständen zwischen den Zielen. Die Weltkarte bei 50languages.com (zum Zeitpunkt des Schreibens) veranschaulicht das Problem perfekt. Es ist viel einfacher, Russland oder Nordamerika zu tippen als Albanien oder Estland.

Sie fügen Ihr Bild auf ähnliche Weise wie immer ein (mit einem <img>-Element und alt-Text). Wenn das Bild nur als Navigationsgerät vorhanden ist, können Sie alt="" schreiben, vorausgesetzt, Sie liefern später einen geeigneten alt-Text in den <area>-Elementen.

Sie benötigen ein spezielles usemap-Attribut. Denken Sie sich einen einzigartigen Namen ohne Leerzeichen für Ihre Bildkarte aus. Weisen Sie diesen Namen (vorausgegangen von einem Hash) als Wert für das usemap-Attribut zu:

html
<img src="image-map.png" alt="" usemap="#example-map-1" />

Schritt 2: Aktivieren Sie Ihre Hotspots

In diesem Schritt platzieren Sie Ihren gesamten Code innerhalb eines <map>-Elements. <map> benötigt nur ein Attribut, denselben name-Namen wie Sie in Ihrem usemap-Attribut oben verwendet haben:

html
<map name="example-map-1"> </map>

Innerhalb des <map>-Elements benötigen wir <area>-Elemente. Ein <area>-Element entspricht einem einzelnen Hotspot. Um die Tastaturnavigation intuitiv zu gestalten, stellen Sie sicher, dass die Quellreihenfolge der <area>-Elemente der visuellen Reihenfolge der Hotspots entspricht.

Die <area>-Elemente sind leere Elemente, benötigen jedoch vier Attribute:

shape

Das shape-Attribut nimmt einen von vier Werten an: circle, rect, poly und default. Ein <area>, dessen shape default ist, nimmt das gesamte Bild ein, abzüglich aller anderen von Ihnen definierten Hotspots. Wenn es eine Überlappung zwischen den definierten Bereichen gibt, bestimmt die Quellreihenfolge, welcher Bereich Vorzug hat. Die gewählte Form bestimmt die Koordinateninformationen, die Sie in coords bereitstellen müssen.

coords

Koordinaten werden in CSS-Pixeln angegeben, und ihr Wert hängt von der ausgewählten shape ab.

  • Für einen Kreis geben Sie die x- und y-Koordinaten des Zentrums sowie die Länge des Radius an.
  • Für ein Rechteck geben Sie die x- und y-Koordinaten der oberen linken und unteren rechten Ecken an.
  • Für ein Polygon geben Sie die x- und y-Koordinaten jeder Ecke an (also mindestens sechs Werte).
href

Die URL der Ressource, zu der Sie verlinken. Sie können dieses Attribut leer lassen, wenn Sie nicht möchten, dass der aktuelle Bereich irgendwohin verlinkt wird (z.B. wenn Sie einen hohlen Kreis erstellen).

alt

Ein obligatorisches Attribut, das angibt, wohin der Link führt oder was er tut. alt-Text wird nur angezeigt, wenn das Bild nicht verfügbar ist. Bitte beachten Sie unsere Richtlinien zum Schreiben von zugänglichem Linktext.

Sie können alt="" schreiben, wenn das href-Attribut leer ist und das gesamte Bild bereits ein alt-Attribut hat.

html
<map name="example-map-1">
  <area
    shape="circle"
    coords="200,250,25"
    href="page-2.html"
    alt="circle example" />

  <area
    shape="rect"
    coords="10, 5, 20, 15"
    href="page-3.html"
    alt="rectangle example" />
</map>

Schritt 3: Sicherstellen, dass es für alle funktioniert

Sie sind nicht fertig, bis Sie Bildkarten gründlich in vielen Browsern und auf verschiedenen Geräten getestet haben. Versuchen Sie, Links nur mit Ihrer Tastatur zu folgen. Versuchen Sie, Bilder auszuschalten.

Wenn Ihre Bildkarte breiter als etwa 240px ist, müssen Sie weitere Anpassungen vornehmen, um Ihre Website responsiv zu machen. Es reicht nicht aus, das Bild für kleine Bildschirme zu verkleinern, da die Koordinaten gleich bleiben und nicht mehr mit dem Bild übereinstimmen.

Mehr erfahren