You are using Internet Explorer 11 or earlier, this browser is no longer supported by this website. We suggest to use a modern browser.

Hotspot Image (03_06)

The “Hotspot Image” module displays an image with interactable hotspots that can be freely positioned by the editor. These hotspots can either open a layer (small window) or a link. Descriptions can be added to the layers, which are displayed when interacting with the hotspot. It is possible to interact either by clicking or by mouseover. This module is particularly suitable for displaying and describing detailed technical visualisations.

Hotspot Image - Module view

Hotspot Image in the content area

This is how the module works

The module consists of the following components:
1. Image
Resolution: width 1334px
Category and headline- optional
- Text is positioned on the image in blue stripes
2. General settings for hotspots- applies to all hotspots
- can be overwritten for each hotspot individually
Appearance
Shapecircle or rectangle
Width & Heightinput possible in pixels or percent
Rotationrotation of the hotspot around its own axis (in degrees)
Color- transparent (only visible in CMS)
- primary color of the project (default: blue)
- secondary color of the project (default: dark blue)
- primary signal color of the project (default: orange)
- red
- green
- turquoise
Event
Click Eventwhat should happen when the hotspot is triggered?
- opens layer
- opens link
Linkonly visible if hotspot opens link
- all kinds of link possible
- always triggred by click
Triggeronly visible if hotspot opens layer
When should the layer be opened?
- by click
- by mouseover
3. Hotspotsany number (Note: The mobile view turns the hotspots into a slider with jump marks as buttons)
Position of the hotspotIndication in percent from the top left corner of the image.
Customize hotspot- if selected, the hotspot can be customized individually
- options are the same as general settigs
- if not selected, general settings will be used
Hotspot event- can be customized
- options are the same as general settings
Layer
Text- Headline
- Sub-headline
- Free text field without formatting options
Link- optional
- internal or external
- multiple links possible

The module can be used in the following templates and page areas:

Template and page area: Hotspot Image

The blue area indicates that the module is applicable.

Dimensioned screenshots

Hotspot Image: Dimensioning Desktop
Desktop
Hotspot Image: Dimensioning Tablet
Tablet
Hotspot Image: Dimensioning Mobile
Mobile