# 360° / Foto Hotspot-Editor
Mit dem **Hotspot-Editor** platzierst du klickbare Punkte direkt in einem **360°-Panorama** oder **normalen Foto**. Hotspots können Szenen öffnen, Infos zeigen oder eigenes JS ausführen.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/JLcgrafik.png)
## Bild & View
- **Bild-URL / Bild wählen**
Wähle ein 360°-Bild (equirectangular) oder ein normales Foto. Upload über die Medienauswahl ist möglich.
- **HFOV**
„Horizontal Field of View“ – Zoomstufe der Startansicht (z. B. **100**).
- **Kompass (Ja/Nein)**
Blendet einen Kompass/Heading-Indikator ein.
**Tipp:** Das Kreuz **„Hier Hotspot erstellen“** setzt einen neuen Hotspot an der angeklickten Stelle.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/XtXgrafik.png)
## Hotspot bearbeiten
**Label**
Beschriftung (z. B. „Weiter“, „Info“).
**Typ**
- **Button** – Rechteckiger Button mit Text.
- (Weitere Typen – z. B. Icon/Point – falls in deinem Projekt aktiv – verhalten sich entsprechend.)
**CSS-Klasse**
Optionale Klasse zur Feinstilierung (z. B. `hs-primary`, eigenes Theme).
**Yaw / Pitch**
Exakte Ausrichtung des Hotspots (horizontale/vertikale Winkel). Diese Werte werden beim Platzieren automatisch gesetzt und können feinjustiert werden.
**Zielszene (optional)**
Szene, die beim Klick geöffnet wird. Leer lassen = **keine Navigation** (nur Popup/JS).
**Farben & Stil**
- **Text/Icon-Farbe**
- **Hintergrund** (z. B. `rgba(0,0,0,.5)` für halbtransparent)
- **Border-Farbe**
- **Schriftgröße**, **Radius**, **Padding**
**Popup verwenden**
Zeigt beim Klick ein kleines Popup (Titel/Label). In der Vorschau mit **Shift-Klick** testen.
**onClick JS (optional)**
Eigener JavaScript-Code, der beim Klick ausgeführt wird
(z. B. `console.log('clicked')`, Tracking, komplexe Logik).
> Für Standard-Navigation **nicht nötig** – dafür reicht die Zielszene.
**Editor-Shortcuts**
- **Alt-Klick**: onClick-JS sofort testen (im Editor).
- **Shift-Klick**: Popup-Vorschau öffnen.
---
## Verhalten in der App
- Hotspots liegen **über** dem 360°/Foto und folgen der Perspektive.
- Klick/Tap auf den Hotspot:
1. führt **onClick JS** aus (falls vorhanden),
2. öffnet optional das **Popup**,
3. navigiert – wenn gesetzt – in die **Zielszene**.
- Kompass und Start-HFOV werden aus den Einstellungen übernommen.
---
## Praxis-Tipps
- **Assets**: 360° equirectangular **2:1** (z. B. 4096×2048). Normale Fotos gern 1920 px Breite+.
- **Lesbarkeit**: Halbtransparente Hintergründe (`rgba`) und ausreichender Kontrast.
- **Fokus**: Wichtige Hotspots nicht zu nah am Zenith/Nadir (starke Verzerrung).
- **Mobile UX**: Wenige, klare Hotspots; Abstand zwischen Hotspots für Touch-Ziele.
- **Navigation**: Für „Weiter“-Ketten reicht **Zielszene** – JS nur bei Sonderfällen.
- **Testing**: HFOV & Startblick einmal am Gerät prüfen; ggf. Yaw/Pitch leicht nachstellen.
---
## Kurz-Workflow
1. **Bild wählen** → **HFOV/Kompass** setzen.
2. Im Viewer **„Hier Hotspot erstellen“** klicken.
3. **Label**, **Typ**, **Zielszene** (optional) und **Stil** einstellen.
4. (Optional) **Popup** aktivieren oder **onClick JS** hinterlegen.
5. **Übernehmen** → weitere Hotspots hinzufügen → **Speichern**.