Hotspots and Image maps
CREATED FOR:
- Developer
- User
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);
}