[▶️ Video: anatomy of the Clickable zone block](https://celestory-docs-videos.netlify.app/en/anatomie-bloc/clickablezonechoice.html)


![Clickable zone](https://celestory-docs-illustrations.netlify.app/en/Clickablezone_EN.svg)

The Clickable zone block turns a picture into several invisible buttons: you mark out areas on an image (for example "Play", "Options" and "Quit" buttons drawn on a background) and each area becomes clickable for the player. It is ideal for a custom illustrated menu, or for a "Point and Click" style game where players must find and click hidden objects in a scene.

There is nothing to code: as soon as you add a zone to the image, the block automatically creates the matching output in the graph.

## 📥 Inputs

- in (Stream): Entry point triggering the display of the clickable image.
- image (Clickable Image): Resource containing the interactive zones (layers or sub-zones) previously defined.
- timer (Number): (Optional) Time allowed for the player, in seconds. With 0, there is no limit. When it runs out, the scenario continues through the time out output. The remaining time is shown as a bar (see below).
- Dynamic zones (Parameters): Additional inputs automatically generated for each interactive zone, allowing its behavior or style to be modified before display.
- [Layer name] (image): (Optional) Additional input created for each layer of type **Image** or **Text and image**. It replaces the image of that layer (see below).

## 📤 Outputs

- [Zone 1 name], [Zone 2 name], ... (Stream): Dynamic outputs created for each interactive area of the image. Clicking on an area activates the corresponding output.
- time out (Stream): Output that appears as soon as you give the timer a value greater than 0. It is followed when the time runs out before any zone has been clicked.

## 🖼️ Changing a layer's image with a variable

Each **Image** or **Text and image** layer of your clickable image gets, in the block, an optional input named "[layer name] (image)". Connect an Image variable (or a value) to it to replace the layer's image when the block is displayed, without changing the clickable image resource. The layer's text and border are kept; only the image changes. **Shape** layers do not have this input.

If the input is empty, or if the file is unknown to the project, the player sees the layer's original image: you can therefore fill the input in only in some cases.

Example: the same forest scene, with an Image layer "Backdrop". Depending on an Image variable updated earlier in the scenario (Assign block), the backdrop shows the forest by day or by night, while the zones to click stay the same.

The image is chosen when the block is displayed: it does not change while the clickable image is on screen.

## ⏱️ The timer bar

When a timer is set, a thin 2-pixel line empties as time goes by, in the Chatbot and Visual Novel templates. It is centered at the bottom of the player window, at a fixed height: it does not follow the size of the image. It shrinks on both sides towards the center, has the same color as the timer of the module's choice blocks and lets clicks through to the zones.

If the player has asked their device to reduce motion, the bar drops in steps of one second instead of emptying continuously. For screen readers, the bar is announced as a "Time left" progress, updated every second.

## 💡 Example of use


[▶️ Video: the Clickable zone block](https://celestory-docs-videos.netlify.app/en/geste-ui/clickable-zone.html)


Scenario: Custom home menu with visual buttons

1. You have prepared a Clickable Image resource representing a home screen with three buttons: "Play", "Options" and "Exit".
1. In the graph, add a Clickable zone block and connect it to a trigger (eg: module loading).
1. Assign your image to the image input of the block.
1. The block now displays three outputs: "Play", "Options" and "Exit".
1. Connect the "Play" output to a game launch block, "Options" to a configuration menu, and "Exit" to an exit confirmation.

## ⚙️ Technical Details

- **Internal identifier**: `clickableZoneChoice`
- Dynamic output management: The block analyzes the image to automatically generate the outputs corresponding to the interactive areas.
- Compatibility: Supports TextWithImage type layers for text extraction (useful for translation).
- Optimization: Dynamic inputs allow real-time adjustments without changing the image resource.
- Blocks already present in a module created before version 6.1: the "(image)" inputs appear when you modify the clickable image used by the block.

---

*Available from Creator version 6.1 (image input per layer, thin-line timer bar).*

*Documented version: v2*