Interaktive Bilder in Notion: Was wirklich geht und wo die Grenzen liegen
Notion ist nicht für klickbare Bildbereiche gebaut. Trotzdem gibt es Wege — vom Embed-Block bis zum Workaround mit externen Tools.
Notion und das Hotspot-Problem
Notion ist als Wissensdatenbank und Workspace gebaut, nicht als Webseiten-Editor. Klassische HTML-Imagemaps sind dort nicht vorgesehen. Wenn du in Notion ein Bild mit klickbaren Bereichen möchtest, bewegst du dich von Anfang an in einem Workaround. Hier ist, was tatsächlich funktioniert.
Was Notion nicht kann
Im Editor gibt es keinen HTML-Block. Du kannst keinen map-Code einfügen, keine eigenen script-Tags ausführen, keine CSS-Animationen schreiben. Notion-Seiten sind eine Mischung aus Markdown, Datenbanken und ausgewählten Embed-Blocks — nicht beliebig erweiterbar. Für interaktive Bilder gibt es nur einen Weg: Embed.
Methode 1: Embed-Block mit externem Hotspot-Tool
Notion erkennt eine Reihe von URL-Mustern und rendert sie als Iframe. Wenn dein Hotspot-Anbieter eine Standalone-URL für das Projekt liefert (also einen direkten Link zur Vorschau), kannst du diese URL in Notion einbetten.
Bei deinem Hotspot-Anbieter (z.B. picpins) das Projekt erstellen und veröffentlichen. Den direkten Vorschau-Link kopieren — bei picpins findest du ihn im Embed-Modal als "Direkter Link zur Vorschau". In Notion an der gewünschten Stelle /embed tippen, Enter drücken, URL einfügen, "Embed link" klicken. Notion lädt das Projekt in einem Iframe. Du kannst Höhe und Breite per Drag anpassen.
Was im Embed funktioniert und was nicht
Notion-Embeds laufen in einem Iframe mit Sandbox-Beschränkungen. Klick-Tooltips funktionieren — beim Klick auf einen Marker öffnet sich der Tooltip wie erwartet. Hover-Tooltips sind unzuverlässig — auf manchen Browsern und besonders auf Touch-Geräten verhalten sie sich anders als auf einer normalen Webseite. Externe Links aus dem Tooltip öffnen je nach Browser im neuen Tab oder werden vom Iframe blockiert.
Wenn du Notion gezielt einsetzt, stelle in deinem Hotspot-Tool den Trigger auf "Klick" statt "Hover". Bei picpins geht das pro Marker im Tooltip-Settings-Popover (siehe Tooltip-Anleitung).
Methode 2: Bild mit eigenständiger Verlinkung
Wenn dein Anwendungsfall einfacher ist — also ein Bild plus zwei oder drei Links — kannst du in Notion das Bild als normalen Block einfügen, darunter eine Liste mit den Links. Keine Imagemap, dafür sauber: Bild oben, darunter eine kurze Liste mit nummerierten Punkten, die im Bild erkennbar sind. Das ist altmodisch, funktioniert aber überall, ist barrierefrei und braucht null Tooling.
Methode 3: Notion-API plus eigene Vorschau-Seite
Für fortgeschrittene Anwender: Du kannst Inhalte aus einer Notion-Datenbank per Notion-API abfragen und auf einer eigenen Webseite mit interaktiven Bildern verknüpfen. Das ist ein eigenes Projekt — sinnvoll, wenn Notion deine Inhaltsquelle ist und die öffentliche Webseite davon getrennt läuft.
Notion ist kein Frontend
Wer in Notion eine vollständige Produktseite mit Hotspots aufbauen will, kämpft gegen das Tool. Notion ist gemacht für interne Wissensorganisation. Wenn der Anwendungsfall öffentlich-präsentabel ist (Marketing-Seite, Produktdetailseite), lohnt sich der Wechsel auf einen Webseiten-Baukasten oder ein CMS — und Notion bleibt für die interne Doku.
Pragmatische Empfehlung
Für eine schnelle interne Doku mit interaktivem Bild reicht ein picpins-Embed in Notion. Für öffentlich-sichtbare Inhalte ist Notion das falsche Werkzeug — eine eigene Webseite oder ein Wix-/Squarespace-Auftritt funktioniert dort besser.
