Eine HTML Image Map (Bildkarte) in HTML ermöglicht es, verschiedene Teile eines Bildes anklickbar zu machen und sie mit verschiedenen Links zu verknüpfen. Dies ist besonders nützlich, wenn Sie ein einzelnes Bild verwenden möchten, aber verschiedene Bereiche dieses Bildes zu unterschiedlichen Zielen führen sollen. In diesem Artikel erfahren Sie, wie Sie eine Image Map erstellen, die verschiedenen Formen für interaktive Bereiche definieren und häufig gestellte Fragen beantworten.
1. Was ist eine HTML Image Map?
Eine Image Map ist ein Bild, das in verschiedene anklickbare Bereiche unterteilt ist. Diese Bereiche können als Links oder Verweise zu anderen Webseiten oder Abschnitten der gleichen Seite verwendet werden. Die Bereiche können rechteckig, kreisförmig oder polygonal sein.
Die beiden wichtigsten HTML-Tags, die zur Erstellung einer Image Map benötigt werden, sind:
<map>: Definiert die Image Map.<area>: Definiert die klickbaren Bereiche innerhalb der Image Map.
2. Grundlegende Syntax
Schritt 1: Ein Bild mit der Image Map verknüpfen
Zunächst müssen Sie ein Bild einfügen und es mit einer Image Map verknüpfen, indem Sie das usemap-Attribut des <img>-Tags verwenden.
<img src="bild.jpg" alt="Interaktive Bildkarte" usemap="#image-map">Schritt 2: Erstellen der Image Map
Verwenden Sie das <map>-Tag, um die Image Map zu definieren. Das name-Attribut muss mit dem Wert des usemap-Attributs des Bildes übereinstimmen (ohne das #-Symbol).
<map name="image-map">
<!-- Klickbare Bereiche werden hier definiert -->
</map>Schritt 3: Definieren der klickbaren Bereiche
Die klickbaren Bereiche werden mit dem <area>-Tag definiert. Es gibt verschiedene Formen, die Sie für die Bereiche verwenden können:
- Rechteck: Definiert durch vier Werte (x1, y1, x2, y2).
- Kreis: Definiert durch drei Werte (Mittelpunkt-x, Mittelpunkt-y, Radius).
- Polygon: Definiert durch mehrere Paare von x- und y-Werten.
3. Beispiel einer einfachen Image Map
Hier ist ein Beispiel, das eine rechteckige, kreisförmige und polygonale Fläche auf einem Bild verwendet.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Image Map Beispiel</title>
</head>
<body>
<h1>Beispiel einer interaktiven Bildkarte</h1>
<img src="weltkarte.jpg" alt="Weltkarte" usemap="#worldmap" width="600" height="400">
<map name="worldmap">
<!-- Rechteck -->
<area shape="rect" coords="34,44,270,350" alt="Europa" href="https://example.com/europa">
<!-- Kreis -->
<area shape="circle" coords="450,200,100" alt="Afrika" href="https://example.com/afrika">
<!-- Polygon -->
<area shape="poly" coords="400,10,480,200,350,400,200,320" alt="Südamerika" href="https://example.com/suedamerika">
</map>
</body>
</html>Erklärung:
- Rechteck: Ein rechteckiger Bereich, der durch die Koordinaten des oberen linken und des unteren rechten Punktes definiert wird (
x1, y1, x2, y2). - Kreis: Ein kreisförmiger Bereich, der durch die Koordinaten des Mittelpunkts und den Radius definiert wird (
center-x, center-y, radius). - Polygon: Ein polygonaler Bereich, der durch eine Reihe von Punkten definiert wird (
x1, y1, x2, y2, ..., xn, yn).
4. Formen und Koordinaten
4.1 Rechteck (rect)
Die rechteckige Form wird durch vier Koordinaten definiert:
<area shape="rect" coords="x1,y1,x2,y2" href="link" alt="Beschreibung">- x1, y1: Die Koordinaten des oberen linken Punktes.
- x2, y2: Die Koordinaten des unteren rechten Punktes.
4.2 Kreis (circle)
Ein Kreis wird durch drei Koordinaten definiert:
<area shape="circle" coords="center-x,center-y,radius" href="link" alt="Beschreibung">- center-x, center-y: Die Koordinaten des Mittelpunkts.
- radius: Der Radius des Kreises.
4.3 Polygon (poly)
Ein Polygon wird durch eine variable Anzahl von Punkten definiert:
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,...,xn,yn" href="link" alt="Beschreibung">- Jeder Punkt wird durch ein Paar von Koordinaten (x, y) definiert.
5. Barrierefreiheit und alt-Text
Es ist wichtig, dass jeder <area>-Tag einen beschreibenden alt-Text enthält. Dies verbessert die Zugänglichkeit der Webseite, da Screenreader den alt-Text für sehbehinderte Benutzer vorlesen, die möglicherweise die Bildkarte nicht sehen können. Achten Sie darauf, dass der alt-Text für jeden Bereich prägnant und beschreibend ist.
6. Tipps für die Verwendung von Image Maps
- Koordinaten bestimmen: Verwenden Sie Grafiksoftware wie Photoshop oder Online-Tools, um die genauen Koordinaten der Punkte für Ihre Image Map zu ermitteln.
- Responsive Design: Standard-HTML-Image-Maps sind nicht responsive. Verwenden Sie CSS und JavaScript, um die Bildkarte bei verschiedenen Bildschirmgrößen korrekt zu skalieren.
alt-Attribute verwenden: Vergessen Sie nicht, für jeden Bereich der Image Map einenalt-Text bereitzustellen, um die Barrierefreiheit zu gewährleisten.
Häufig gestellte Fragen
Können Image Maps responsive sein?
Standardmäßig sind HTML-Image-Maps nicht responsive, d.h. sie skalieren nicht automatisch mit der Größe des Bildes. Um eine responsive Image Map zu erstellen, können Sie CSS und JavaScript verwenden, um die Koordinaten dynamisch anzupassen oder externe Bibliotheken wie image-map-resizer verwenden.
Wie finde ich die genauen Koordinaten für eine Image Map?
Sie können Grafikprogramme wie Photoshop oder Online-Tools wie Image Map Generator verwenden, um die genauen Koordinaten eines Bildes zu ermitteln. Diese Tools helfen Ihnen dabei, die richtigen Punkte für Rechtecke, Kreise oder Polygone zu bestimmen.
Ist es möglich, mehrere Links innerhalb einer Image Map zu haben?
Ja, Sie können mehrere Links innerhalb einer Image Map erstellen, indem Sie verschiedene <area>-Tags mit verschiedenen href-Attributen verwenden.
Kann ich eine Image Map auch für andere Elemente als Bilder verwenden?
Nein, Image Maps sind speziell für die Verwendung mit dem <img>-Tag gedacht. Sie können jedoch andere interaktive Elemente wie SVG oder CSS verwenden, um ähnliche Effekte mit anderen HTML-Elementen zu erzielen.
Was passiert, wenn ein Bereich der Image Map nicht funktioniert?
Wenn ein Bereich der Image Map aufgrund von falschen Koordinaten oder einem fehlerhaften href-Attribut nicht funktioniert, wird nichts passieren, wenn der Benutzer darauf klickt. Stellen Sie sicher, dass die Koordinaten und Links korrekt sind.