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

UCP Pattern Library
UCP Pattern Library
UCP Pattern LibraryUCP Pattern LibraryUCP Pattern Library
  • Deutsch
  • Pattern Library
  • flexible
    • Deutsch
  • Home
  • Patterns by type
  • Content > Media
  • Hotspot Image (03_06)

Hotspot Image/ Video (03_06)

The “Hotspot Image/Video” module displays an image or video 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 visualizations.

Example page view

The module is marked in orange.

Hotspot Image - Module view

Hotspot Image in the content area

This is how the module works

The module consists of the following components:

ContentDescription
Text above the headingtext above the headline displayed in blue stripes
Headingpositioned on the image in blue stripes
Captiondisplayed below the image in left corner
Media typeThere can be two media types
1. Image
Resolution: width 1334px
Category and headline- optional
- Text is positioned on the image in blue stripes
2. Video- Video ID from YouTube, Vimeo, Cinema graph(Flixel) or video URL for HLS Video or external video file
Lightbox optionIt is recommended to use hotspots only for autoplay videos. Also, it should not be possible to open the video in a lightbox.
ThumbnailCropped image: width 335 px or width 450 px for mobile view

Note: The play button is automatically positioned on the thumbnail.
Default hotspot settings- applies to all hotspots
- can be overwritten for each hotspot individually
Appearance
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
Shapecircle or rectangle
Icon- No icon
- '+' icon (only for circle shape)
Width & Heightinput possible in pixels or percent
Rotationrotation of the hotspot around its own axis (in degrees)
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
Hotspotsany number (Note: The mobile view turns the hotspots into a slider with jump marks as buttons)
Titlepositioned on the hotspot popup in blue stripes
Position of the hotspotIndication in pixel or 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 settings
- if not selected, general settings will be used
Hotspot event- can be customized
- options are the same as general settings
Layer
TextPosition of layer :- Indication in pixel or percent from the top left corner of the image.
- 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:

Startpage
stage
content
Content Page
stage
main content
right
bottom
Flexible Layout
full-width
default
default with sidebar right
sidebar
sidebar
default with sidebar left
The blue area indicates that the module is applicable in this content area.

Dimensioned screenshots

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

This module can be used in the following themes:

  • Internet
  • Intranet
  • Suite
The blue area indicates that the module is applicable in this theme.

This is what the module looks like

Hotspot Image (03_06)

Example page

arrow-down UCP Pattern Library

  • brandfactory
  • media pool - das Digital Asset Management System für thyssenkrupp
  • CMS Login

Follow us

  • Global Corporate Website
© thyssenkrupp AG 2023
  • Sitemap
  • Imprint
  • Legal Notes
  • Share tk-share
    FacebookTwitter Email LinkedIn