Image map effect image-map-effect

Depending on the value of the mode parameter, the viewer displays image map icons over the main view in places where maps are originally authored in Dynamic Media Classic or renders exact regions that match the shape of original image maps.

CSS properties of the main viewer area

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

.s7ecatalogsearchviewer .s7imagemapeffect .s7icon
NOTE
The s7mapoverlay CSS class used to style image map icons in the past is now deprecated; use s7icon instead.
CSS property
Description
background-image
Image map icon artwork.
background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites.

width
Image map icon width in pixels.
height
Image map icon height in pixels.
NOTE
Image map icon supports the state attribute selector, which you can use to apply different skins to the icon states of default and active.

Example - set up a 28 x 28 pixels image map icon that displays a different image for each of the two different icon states.

.s7ecatalogsearchviewer .s7imagemapeffect .s7icon {
 height: 28px;
 width: 28px;
 background-image: url(images/v2/ImageMapEffect_dark_up.png);
}
.s7ecatalogsearchviewer .s7imagemapeffect .s7icon[state="default"] {
 opacity: 0.5;
}
.s7ecatalogsearchviewer .s7imagemapeffect .s7icon[state="active"] {
opacity: 1;
}

See also Image map support.

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

.s7ecatalogsearchviewer .s7imagemapeffect .s7region
CSS property
Description
background

Image map region fill color.

Specified in #RRGGBB, RGB(R,G,B), or RGBA(R,G,B,A) format.

background-color

Image map region fill color.

Specified in #RRGGBB, RGB(R,G,B), or RGBA(R,G,B,A) format.

border

Image map region border style.

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 1 pixel black border :

.s7ecatalogsearchviewer .s7imagemapeffect .s7region {
 border: 1px solid #000000;
 background: RGBA(0,0,0,0);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8