---
title: "Interactive graphics with clickable hotspots"
description: "Turn an image into a map with clickable items, show items on set days, and use it as a calendar."
url: https://scratcher.io/help/elements/interactive-graphic
language: en
---

1. [Help center](https://scratcher.io/help)
2. [Elements and design](https://scratcher.io/help/elements)
3. Interactive graphics with clickable hotspots

# Interactive graphics with clickable hotspots

Turn an image into a map with clickable items, show items on set days, and use it as a calendar.

An interactive graphic is an image with clickable items on top, for example a store map, a trade show floor plan or a winter landscape where a new item appears each day. It is a special format: you need the **Special formats** add-on, or a plan that includes it.

## Create an interactive graphic

1. Click **Add page** and choose **Interactive graphic**, or insert the element on a page.
2. On the **Content** tab, upload the base **Image**.
3. Click **Add map item** and drag the item to its place on the image.
4. Click the item to set it up:
    - **Name**: only you see it.
    - **Image**: the item's image. You can also **Choose before image** and **Choose after image**, for example a closed and an open gift.
    - **Action**: **Go to page** or **Link**.
5. On the item's **Styles** tab, set the **Hover background**, **Size** and **Shape**. Turn on **Fixed square** in **Settings** to keep it square. Remove an item with **Delete item**.

Use **Edit map item positions** on the page to move the items around. Without an action, an item uses **Go to item**.

## Settings for the whole graphic

- **Scale image to full width**: the image fills the width of the page.
- **Use shared image across items**: all items use the same image.
- **Schedule map items activity**: items are only active at certain times.

## Show items on certain days

With **Schedule map items activity** on, each item gets a **Schedule**:

1. Set the item's **Initial state**: enabled or disabled.
2. Click **Add schedule** and choose when it changes: **From**, **On (single day)** or **Between**. The schedule enables or disables the item, depending on its initial state.
3. Choose the **Date type**: a **Campaign day** (for example day 3 of the campaign) or a **Fixed date**.

## Use it as a calendar

Turn on **Enable advanced calendar** to give each item its own pages, game and prizes, just like a calendar door. Use the add-on **Override item actions** if some items should do something else. See [Advent and Christmas calendars](https://scratcher.io/help/games/advent-and-christmas-calendars).

In the list of items, each schedule is summarised, for example "From campaign day 3", "Until campaign day 10" or "Campaign day 3-5". For a **Fixed date**, pick it under **Select date**. The add-on **Override item actions** reads "Allow specifying a custom action on items".

Elements and design

- [How element settings work](https://scratcher.io/help/elements/element-settings-basics)
- [Edit text and headings](https://scratcher.io/help/elements/text-and-headings)
- [Buttons and click actions](https://scratcher.io/help/elements/buttons-and-click-actions)
- [Images, logos, video and fonts](https://scratcher.io/help/elements/images-video-and-fonts)
- [Sections, columns, dividers and spacers](https://scratcher.io/help/elements/sections-columns-and-layout)
- [Page settings, backgrounds and popup pages](https://scratcher.io/help/elements/page-settings-and-backgrounds)
- [Countdown, social, share and menu elements](https://scratcher.io/help/elements/countdown-social-share-and-menu)
- [Interactive graphics with clickable hotspots](https://scratcher.io/help/elements/interactive-graphic)
- [Cookie notice, custom code and other campaign add-ons](https://scratcher.io/help/elements/cookie-notice-and-custom-code)
- [Save and reuse templates](https://scratcher.io/help/elements/templates-and-reuse)

## Related articles

- [Buttons and click actions](https://scratcher.io/help/elements/buttons-and-click-actions): Choose what happens when people click a button or image: next page, a link, play, submit, share, download and more.
- [Advent and Christmas calendars: set one up step by step](https://scratcher.io/help/games/advent-and-christmas-calendars): Choose between the Christmas calendar, advent calendar and free calendar, set the dates, design the doors, put a game and a prize behind each door and test every day before you go live.
- [Countdowns, pre-registration and campaign ended pages](https://scratcher.io/help/games/special-pages): Build excitement before launch with a countdown, collect sign-ups before the start, show a page when the campaign has ended, and let people upload photos.

## Still need help?

Real people are here to help. If you already use Scratcher, the quickest way is the chat inside the platform.

- **[Chat with us](https://platform.scratcher.io/login)**

    Log in and click the chat button in the bottom-right corner. Rex answers right away, and our team is a click away.
- **[Book a meeting](https://scratcher.io/book-a-meeting)**

    A free 30-minute video call with our team: a tour, campaign ideas or help with your setup.
- **[Email us](mailto:contact@scratcher.io)**

    Write to contact@scratcher.io and we will get back to you.