Hotspots und interaktive Bilder in Framer: Smart Components, Embeds und der direkte Weg

Framer als visueller Editor

Framer ist visueller Design-Editor und Web-Builder zugleich. Wenn du dort ein Bild mit klickbaren Bereichen einbauen willst, hast du mehrere Optionen — vom Code-Component bis zum schlichten HTML-Embed.

Methode 1: Smart Component mit Hotspots selbst bauen

Im Framer-Designer kannst du eigene Smart Components bauen, die Variants (also unterschiedliche Zustände) haben. Damit lassen sich Hotspot-Bilder ohne externe Tools realisieren — vergleichbar mit dem Webflow-Way, nur mit Framer-Logik.

Bild als Hintergrund eines Frames setzen, Größe fixieren. Pro Hotspot ein kleines Frame-Element absolut positionieren — etwa ein 32-Pixel-Kreis halbtransparent. Pro Hotspot ein Tooltip-Frame anlegen (initial unsichtbar). Über die Interactions-Panel: Hover-Trigger auf den Hotspot, beim Hover wird das Tooltip-Frame eingeblendet. Optional: Klick-Trigger, der zu einer anderen Seite navigiert oder ein Modal öffnet.

Mit etwas Übung bauen sich solche Components in 10 bis 15 Minuten zusammen. Sie sind voll responsive, wenn du Position in Prozent angibst und das Bild relativ skaliert.

Methode 2: Code Component für mehr Flexibilität

Wer fortgeschrittener arbeitet, kann in Framer ein eigenes Code Component in React schreiben. Damit lässt sich beliebige Logik einbauen — Hover-Tooltips, animierte Übergänge, datenbankbasierte Inhalte. Das ist die volle Programmierer-Variante. Aufwand höher, Flexibilität maximal.

Methode 3: Embed-Element für externe Tools

Der schnellste Weg: das eingebaute Embed-Component. Im Insert-Panel das Embed-Element auswählen, auf den Canvas ziehen. Im Properties-Panel rechts auf HTML klicken und den Code einfügen. Auf Publish klicken — der Embed wird in der Designer-Vorschau gerendert.

Im Embed-Element kannst du eine klassische HTML-Imagemap unterbringen, einen iFrame mit Vorschau-URL oder einen vollständigen Embed-Code von picpins.

Externes Tool: Beispiel picpins

Mit picpins für Framer läuft es so: Bild auf picpins.com hochladen, Marker setzen, Tooltips füllen. Embed-Code kopieren. In Framer Embed-Element einfügen, Code reinsetzen, publishen. Im Framer-Designer wird der Embed gepoolt geladen — manchmal muss die Preview einmal neu gestartet werden. Auf der publishten Seite läuft alles wie erwartet.

Welche Methode wann?

Smart Component oder Code Component: wenn das Hotspot-Bild zur Design-Identität gehört, das Bild lange unverändert bleibt und du volle Kontrolle über Animationen und Verhalten haben willst.

Embed mit externem Tool: wenn du in Minuten fertig sein willst, das Bild später ändern können willst, ohne den Framer-Editor erneut anzufassen, oder dasselbe Bild auf mehreren Plattformen einbinden willst.

Performance-Notiz

Framer-Seiten sind statisch generiert und sehr schnell. Embeds laden zusätzlich ein externes Skript — bei einem einzelnen Hotspot-Bild kein Problem, bei zehn auf einer Seite messbar. Wenn die Performance kritisch ist, sind Smart Components die saubere Wahl.