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, it 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:
.s7ecatalogviewer .s7imagemapeffect .s7icon
s7mapoverlay CSS class used to style image map icons in the past is now deprecated; use s7icon instead.Position inside artwork sprite, if CSS sprites are used.
See also CSS Sprites.
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.
.s7ecatalogviewer .s7imagemapeffect .s7icon {
height: 28px;
width: 28px;
background-image: url(images/v2/ImageMapEffect_dark_up.png);
}
.s7ecatalogviewer .s7imagemapeffect .s7icon[state="default"] {
opacity: 0.5;
}
.s7ecatalogviewer .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:
.s7ecatalogviewer .s7imagemapeffect .s7region
Image map region fill color.
Specified in #RRGGBB, RGB(R,G,B), or RGBA(R,G,B,A) format.
Image map region fill color.
Specified in #RRGGBB, RGB(R,G,B), or RGBA(R,G,B,A) format.
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 :
.s7ecatalogviewer .s7imagemapeffect .s7region {
border: 1px solid #000000;
background: RGBA(0,0,0,0);
}