Image-Map-Generator: klickbare Bereiche zeichnen, HTML erhalten | We.Inc
Zeichne Rechtecke, Kreise und Polygone auf dein eigenes Bild, gib jedem einen Link und Alt-Text und kopiere dann klassisches map- und area-HTML oder eine responsive SVG-Version.
Image-Map-Generator
Eine Image Map macht Teile eines Bildes zu eigenen Links. Lade ein Bild, ziehe Rechtecke oder Kreise auf, klicke Punkte für Polygone und gib für jeden Bereich einen Link und Alt-Text ein. Kopiere das klassische map- und area-HTML oder eine responsive SVG-Version, deren Bereiche auf Handys mit dem Bild schrumpfen.
area-Formen und ihre coords
Bedeutung
Obere linke und untere rechte Ecke
Mittelpunkt und Radius
Jede Ecke der Reihe nach; die Form schließt sich selbst
(keine)
Alles, was nicht von einem anderen Bereich abgedeckt ist
Grundrisse, Produktdiagramme, Teamfotos und Karten brauchen oft mehrere Links in einem Bild. Die Bereiche nach Augenmaß zu zeichnen geht viel schneller als Pixel abzumessen, und dein Bild verlässt nie deinen Computer: Es wird im Browser gelesen, und im Code wird nur seine Größe verwendet.
Nutze den Beispiel-Grundriss oder wähle eine eigene Bilddatei. Die Koordinaten werden in den echten Pixeln des Bildes gemessen, auch wenn die Vorschau verkleinert ist.
Wähle Rechteck oder Kreis und ziehe auf dem Bild, oder wähle Polygon, klicke jede Ecke an und drücke dann Polygon abschließen.
Bearbeite Link, Alt-Text und Koordinaten jedes Bereichs in der Liste. Eingetippte Koordinaten aktualisieren die Zeichnung, so können auch Tastaturnutzer eine Map bauen.
Kopiere das klassische HTML oder das responsive SVG. Ersetze den Bildpfad im Code durch den Ort, an dem die Datei auf deiner Website liegen wird.
Jeder Bereich mit einem href braucht Alt-Text. Ihn lesen Screenreader vor, also nenne das Ziel, etwa Tisch im Café reservieren.
Die Koordinaten klassischer Image Maps sind feste CSS-Pixel. Wenn CSS das Bild auf Handys verkleinert, bleiben die Bereiche, wo sie waren, nutze für flexible Layouts also die SVG-Ausgabe.
Halte klickbare Bereiche groß genug, um sie bequem anzutippen, und vermeide Bereiche, die ohne Abstand aneinanderstoßen.
Verstecke den einzigen Weg zu einer Seite nicht in einem Bild. Wiederhole wichtige Links als normalen Text in der Nähe.
Häufige Fragen
Wie verbinde ich die Map mit dem Bild?
Gib der Map einen Namen und setze dann usemap am img auf denselben Namen mit einem # davor, zum Beispiel usemap="#site-map" und map name="site-map". Der Generator schreibt beides für dich.
Sind HTML-Image-Maps responsive?
Nicht von selbst. Koordinaten sind Zahlen in CSS-Pixeln, sie folgen also keinem Bild, dessen Größe CSS ändert. Die SVG-Ausgabe löst das mit einer viewBox, die Bild und Link-Formen gemeinsam skaliert.
Wird mein Bild hochgeladen?
Nein. Die Datei wird über eine lokale Object-URL geöffnet, damit der Browser sie anzeigen und Breite und Höhe auslesen kann. Nichts wird an We.Inc oder sonst jemanden gesendet.
Dürfen sich Bereiche überlappen?
Ja. Wo sich zwei Bereiche überlappen, bekommt der zuerst in der Map aufgeführte den Klick, setze also kleinere Bereiche vor größere, die sie umschließen.
Klassische Map oder SVG-Links
Das Paar aus map und area funktioniert seit Jahrzehnten in Browsern und lässt das Bild ein normales img bleiben, was für Content-Tools einfach ist. Seine Schwäche sind feste Koordinaten.
Die SVG-Version zeichnet das Bild in einem svg-Element und packt jede Form in einen Link. Weil sich alles eine viewBox teilt, skalieren die Bereiche perfekt, und du kannst per CSS einen Hover-Umriss an den Formen ergänzen.
Barrierefreie klickbare Bilder
Gib dem Bild selbst einen Alt-Text, der das ganze Bild beschreibt, und jedem Bereich einen Alt-Text, der sein Ziel nennt. Tastaturnutzer springen mit Tab in Quelltext-Reihenfolge durch die Bereiche, ordne sie also in einer sinnvollen Lesereihenfolge an.
Teste, indem du mit Tab durch das Ergebnis gehst. Springt der Fokus im Bild hin und her, ordne die Zeilen in der Liste vor dem Kopieren neu.
Code für den Beispiel-Grundriss
Das sind die beiden Ausgaben, die der Generator für die vier Beispielbereiche schreibt.
Klassisches map und area
Funktioniert überall in der natürlichen Bildgröße von 600 mal 360 Pixeln.
Responsive SVG-Links
Die viewBox entspricht der Bildgröße, sodass jede Link-Form mit dem Bild skaliert.
Bereich {n}
Zeichne deine Bereiche
Zeichne Rechtecke, Kreise und Polygone auf den Beispiel-Grundriss oder dein eigenes Bild und lege dann für jeden Bereich einen Link und Alt-Text fest.