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:

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

On this page