# Interactive image (hotspots)

> Create an interactive image with hotspots to display additional content on click. Perfect for digital magazines, e-learning, and interactive presentations.

https://docs.pandasuite.com/essentials/gamification/create-interactive-image-with-hotspots/

**Interactive image allows you to display lots of information in a visual and engaging way. By clicking on hotspots, users access additional content: text, images, videos, links...**

## Use Cases

Interactive images with hotspots are particularly useful for:

- **Digital magazines**: annotate photos, add contextual information on products
- **E-learning**: create interactive diagrams, annotate technical schematics
- **Presentations**: enrich visuals with details accessible on demand
- **Product catalogs**: showcase detailed features on an image
- **Interactive maps**: map locations with information for each area

## Prerequisites

Before you start, make sure you have:

- A high-quality background image
- The content to display in each popover (text, images, etc.)
- Basic understanding of the [Multi-state component](https://docs.pandasuite.com/essentials/components/multi-state/)

## Step 1: Add the Background Image

1. Import your image into the screen
2. Use **Stretch** and **Alignment** options to make it fullscreen

## Step 2: Create Hotspot Buttons

- Import an existing image, or
- Create your own button using vector shapes (e.g., PLUS icon with a circle and rectangles)

> **Tip**
>
> Use explicit names to facilitate interaction management.

## Step 3: Design the Popovers

**Choose the format:**

- **Popover**: short content displayed above the image (recommended)
- **Fullscreen pop-up**: for longer content

## Step 4: Manage Display with Multi-state

For each popover, create a **Multi-state** component with two states:

- **Hidden state**: opacity at zero
- **Displayed state**: normal opacity

**Quick method (recommended):**

1. Select the popover
2. **Layout** menu → **Convert to Multi-state**
3. In the first state, set **Opacity** to zero
4. Create a **Linked State** with normal opacity

> **Info**
>
> Create one **Multi-state** component per popover for independent management.

## Step 5: Add Interactions

1. Select the hotspot button
2. Add an action: **Single tap / Click** → **Interact with a component**
3. Select the corresponding **Multi-state**
4. Choose **Next state**
5. Enable **Loop** mode

Repeat for each hotspot.

> **Tip**
>
> Add a visible close button in each popover for better UX.

## Additional resources

- [Multi-state Component](https://docs.pandasuite.com/essentials/components/multi-state/) - Complete documentation
- [Pop-up Component](https://docs.pandasuite.com/essentials/components/pop-up/) - Alternative for longer content
- [Interactive Zone](https://docs.pandasuite.com/essentials/components/interactive-zone/) - Custom clickable areas
- [Interactive Actions](https://docs.pandasuite.com/essentials/interactions/interactive-actions/) - Interactions guide

## Video

[Video: Tutorial: Create interactive image with hotspots](https://www.youtube.com/embed/N2Gyw__q3Z8?&hl=en&cc_lang_pref=en&cc_load_policy=1)