> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/elemente/medien/bild-mit-hotspots.md).

# Bild mit Hotspots

Mit dem Element **Bild mit Hotspots** verwandelst du ein einzelnes Bild in eine interaktive Fläche. An frei positionierbaren Punkten – den **Hotspots** – blenden sich beim Klick kleine Info-Karten mit Titel, Text und optional einem Button ein.

So lässt sich beispielsweise ein **„Shop the Look"** umsetzen: ein Wohn- oder Lifestyle-Bild, in dem einzelne Produkte markiert und direkt verlinkt werden. Ebenso eignet sich das Element für Erklärgrafiken, Karten oder Feature-Übersichten.

<figure><img src="/files/rownFH4zOOnOQ9VMs4vV" alt=""><figcaption><p>Beispiel im Storefront: ein Bild mit vier Hotspots, ein Tooltip ist geöffnet</p></figcaption></figure>

{% hint style="success" %}
**Tipp für ein sauberes Ergebnis**

Wähle ein Motiv mit genügend ruhigen Flächen, damit die Hotspots nicht auf wichtigen Bildinhalten liegen. Für ein responsives Verhalten positionierst du die Punkte am besten in Prozent.
{% endhint %}

### Media / Upload

Im ersten Reiter legst du das Bild fest, auf dem die Hotspots platziert werden.

<figure><img src="/files/d9bieFkyZHqpo59CC93o" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Medium hochladen (1)</td><td>Lade hier das Hintergrundbild hoch oder weise ein vorhandenes Medium aus der Mediathek zu. Ohne Bild zeigt das Element einen Hinweis an.</td></tr></tbody></table>

### Hotspots

Lege beliebig viele Hotspots an und klappe einen Eintrag auf, um ihn zu bearbeiten. Jeder Hotspot besitzt die Unterreiter **Inhalt** (Titel und Text der Info-Karte) und **Verlinkung** (optionales Ziel). Sobald eine Verlinkung gesetzt ist, erscheint zusätzlich der Reiter **Button**.

<figure><img src="/files/jrRG5jrxhH52oGx5OfeK" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Titel des Hotspots (1)</td><td>Überschrift der Info-Karte, die beim Klick auf den Punkt erscheint.</td></tr><tr><td>Inhalt des Hotspots (2)</td><td>Beschreibungstext der Info-Karte unterhalb des Titels.</td></tr><tr><td>Verlinkung (3)</td><td>Optionales Ziel des Hotspots (Produkt, Kategorie, URL u. a.). Erst wenn ein Linktyp gewählt ist, erscheint der Reiter <strong>Button</strong>.</td></tr></tbody></table>

{% hint style="info" %}
Über die Symbole rechts an jedem Eintrag kannst du einen Hotspot duplizieren oder löschen. Mit **„Neuen Hotspot hinzufügen"** legst du einen weiteren an.
{% endhint %}

Die Gestaltung des optionalen Buttons erfolgt über den gemeinsamen Baustein:

{% content-ref url="/pages/IDCzxbLczQ60ESEzaHLK" %}
[Button](/cms-bundle/elemente/konfigurationsbausteine/button.md)
{% endcontent-ref %}

### Positionierung

Hier bestimmst du, wo jeder Hotspot auf dem Bild sitzt. Du kannst die Werte exakt eingeben oder den Punkt direkt in der Vorschau mit der Maus an die gewünschte Stelle ziehen.

<figure><img src="/files/6kC3DJccSGgPyfMxiuDu" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Oben (1)</td><td>Vertikale Position des Hotspots, gemessen von der oberen Bildkante.</td></tr><tr><td>Links (2)</td><td>Horizontale Position des Hotspots, gemessen von der linken Bildkante.</td></tr><tr><td>Vorschau mit Ziehpunkten (3)</td><td>Verschiebe die nummerierten Punkte direkt im Bild – die Werte „Oben / Links" aktualisieren sich automatisch.</td></tr></tbody></table>

### Layout

Zum Schluss bestimmst du das Erscheinungsbild der Punkte und ihrer Info-Karten – passend zum Stil deines Shops.

<figure><img src="/files/AubTjHl8Ah9NAW1LXayw" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Größe der Hotspots (1)</td><td>Durchmesser der Punkte in Prozent oder Pixeln.</td></tr><tr><td>Rahmenrundung der Hotspots (2)</td><td>Form der Punkte: 100 % ergibt einen Kreis, kleinere Werte abgerundete Quadrate.</td></tr><tr><td>Mindestbreite des Hotspot-Inhalts (3)</td><td>Mindestbreite der eingeblendeten Info-Karte – wichtig für saubere Zeilenumbrüche.</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.rh-webdesign.com/cms-bundle/elemente/medien/bild-mit-hotspots.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.