Image-Map-Generator

Erstelle mit diesem kostenlosen Image-Map-Generator in Sekunden online eine HTML-Image-Map. Lade ein beliebiges Bild hoch und zeichne direkt darauf klickbare rechteckige, kreisförmige und polygonale Hotspots, weise jedem Bereich eine Link-URL, einen Alt-Text, einen Titel und ein Ziel zu und erhalte sofort sauberen HTML-Code mit <img usemap>, <map> und <area>, den du kopieren oder herunterladen kannst. Die Koordinaten werden aus der nativen Pixelgröße deines Bildes berechnet, sodass die exportierten coords exakt passen, und du kannst das Bild optional als Data-URI einbetten oder ein responsives Skript aktivieren. Alles läuft zu 100% in deinem Browser — dein Bild wird nie auf einen Server hochgeladen und bleibt somit vollständig privat.

🔒 100 % privat — Dateien verlassen dein Gerät nie

Wird geladen…

So funktioniert es

  1. Lade ein Bild hoch oder ziehe es hinein, das als Grundlage für deine klickbare Image-Map dient.
  2. Wähle das Rechteck-, Kreis- oder Polygon-Werkzeug und zeichne Hotspots über die Bereiche, die du verlinken möchtest.
  3. Wähle jeden Bereich aus, um Link-URL, Alt-Text, Titel und das Öffnen in einem neuen Tab festzulegen.
  4. Kopiere den generierten <map>- und <area>-HTML-Code oder lade ihn als fertige .html-Datei herunter.

Häufige Fragen

Was ist eine HTML-Image-Map?

Eine HTML-Image-Map lässt verschiedene Bereiche eines einzelnen Bildes auf unterschiedliche Ziele verlinken. Sie verwendet ein <img>-Tag mit dem usemap-Attribut sowie ein <map>-Element mit <area>-Tags — einen klickbaren Bereich pro Hotspot. Dieses Tool zeichnet diese Bereiche visuell und schreibt die exakten coords für dich.

Welche Bildformate kann ich verwenden?

Du kannst jedes Format verwenden, das dein Browser anzeigen kann, darunter JPG, PNG, WebP und GIF. Das Tool liest die nativen Pixelmaße des Bildes, damit die exportierten Koordinaten exakt zum Bild passen.

Wird mein Bild hochgeladen oder bleibt es privat?

Dein Bild wird nie hochgeladen. Der gesamte Image-Map-Generator läuft zu 100% in deinem Browser, sodass das Bild und der erzeugte HTML-Code auf deinem Gerät bleiben und nichts an einen Server gesendet wird.

Welche Formen kann ich als klickbare Bereiche zeichnen?

Du kannst Rechtecke, Kreise und Polygone zeichnen. Rechtecke und Kreise werden durch Ziehen erstellt, Polygone durch Klicken auf jeden Punkt und anschließenden Doppelklick (oder Drücken der Enter-Taste) zum Schließen der Form. Jeder Bereich exportiert die korrekten shape- und coords-Attribute.

Kann ich Links, Alt-Text festlegen und Bereiche in einem neuen Tab öffnen?

Ja. Für jeden Bereich kannst du die Link-URL (href), den Alt-Text, einen Titel-Tooltip und das Ziel festlegen. Das Öffnen in einem neuen Tab setzt target="_blank" und fügt aus Sicherheitsgründen automatisch rel="noopener" hinzu.

Wie mache ich die Image-Map responsive?

Aktiviere die responsive Option, und der exportierte Code fügt ein kleines Skript sowie data-coords-Attribute hinzu, die die Bereichskoordinaten bei jeder Größenänderung des Bildes neu skalieren. Du kannst das Bild außerdem als Data-URI einbetten, damit der Snippet als eigenständiger Block funktioniert.

Über dieses Tool

Kostenloser Online-Image-Map-Generator: Bild hochladen, rechteckige, kreisförmige und polygonale Hotspots zeichnen, Links vergeben und HTML-usemap-Code kopieren oder herunterladen. 100% im Browser, ohne Upload.

Verwandte Tools