Show Menu
TOPICS×

Hotspots

The viewer displays hotspot icons over the main view in places where hotspots were originally authored in Dynamic Media of AEM Assets – on-demand.
CSS properties of the main viewer area
The appearance of the hotspot icon is controlled with the following CSS class selector:
.s7interactiveimage .s7imagemapeffect .s7icon

CSS property
Description
background-image
Hotspot icon artwork.
background-position
Position inside the artwork sprite, if CSS sprites are use.
width
Hotspot icon width.
height
Hotspot icon height.
Example - set up a 56 x 56 pixels hotspot icon that displays a different image for each of the two different icon states:
.s7interactiveimage .s7imagemapeffect .s7icon { 
 background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png); 
 width: 56px; 
 height: 56px; 
} 
.s7interactiveimage .s7imagemapeffect .s7icon:hover { 
 background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_over_touch.png); 
}