Show Menu
TOPICS×

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 Scene7 Publishing System 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:
.s7ecatalogviewer .s7imagemapeffect .s7icon

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

The appearance of the image map region is controlled with the following CSS class selector:
.s7ecatalogviewer .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 :
.s7ecatalogviewer .s7imagemapeffect .s7region { 
 border: 1px solid #000000; 
 background: RGBA(0,0,0,0);  
}