About this block
The InteractiveTouchpointImageBlock places a background image on the page and layers a set of clickable InteractiveTouchpointBlock hotspots on top of it. Each hotspot is positioned by X/Y percentage coordinates and reveals a heading, description and optional link when clicked or tapped.
It is used to create interactive diagrams — for example, a cutaway image of a reverse vending machine with hotspots explaining each component, or a facility floor plan with clickable zones.
Positioning touchpoints
The PropertyX and PropertyY fields set the hotspot position as a percentage of the image width and height respectively. (0,0) is top-left; (100,100) is bottom-right. Use the CMS visual editor to drag hotspots into position — the percentages update automatically.
Typical use cases
- Machine component diagrams with explanatory hotspots
- Facility floor plans with clickable zone descriptions
- Process flow diagrams showing step-by-step stages
- Before/after comparisons with annotated difference points
Sensor-based sorting technology explained
Inside the TOMRA AUTOSORT
Click on any hotspot to learn more about the AUTOSORT’s key sensor and mechanical components.
