Hotspots and Image maps

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:

.s7carouselviewer .s7imagemapeffect .s7icon

CSS property

Description

background-image

Hotspot icon artwork.

background-position

Position inside the artwork sprite, if CSS sprites are use.

See CSS sprites .

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); 
}

CSS properties of the image map region

The appearance of the image map region is controlled with the following CSS class selector:

.s7carouselviewer .s7imagemapeffect .s7region

CSS property

Description

background

Image map region fill color.

Specify this color in #RRGGBB , RGB(R,G,B) , or RGBA(R,G,B,A) formats.

background-color

Image map region fill color.

Specify this color in #RRGGBB , RGB(R,G,B) , or RGBA(R,G,B,A) formats.

border

Image map region border style. Should be specified as " width solid color ", where width is expressed in pixels, and color is set as #RRGGBB , RGB(R,G,B) , or RGBA(R,G,B,A) .

Example - set up a transparent image map region with a one pixel black border:

.s7carouselviewer .s7imagemapeffect .s7region { 
 border: 1px solid #000000; 
 background: RGBA(0,0,0,0);  
}

On this page