图像映射效果

根据模式参数的值,查看器在主视图上显示图像映射图标(在映射最初是在Dynamic Media Classic中创作的位置),或渲染与原始图像映射形状匹配的确切区域。

主查看器区域的CSS属性

通过以下CSS类选择器控制图像映射图标的外观:

.s7ecatalogsearchviewer .s7imagemapeffect .s7icon
注意

过去用于设置图像映射图标样式的s7mapoverlay CSS类现已弃用;请改用s7icon

CSS属性

说明

背景图像

图像映射图标图稿。

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

另请参阅 CSS Sprite

width

图像映射图标宽度(以像素为单位)。

height

图像映射图标高度(以像素为单位)。

注意

图像映射图标支持state属性选择器,您可以使用该选择器对defaultactive的图标状态应用不同的外观。

示例 — 设置一个28 x 28像素的图像映射图标,该图标会针对两种不同的图标状态中的每一个状态显示不同的图像。

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

另请参阅图像映射支持

图像映射区域的外观由以下CSS类选择器控制:

.s7ecatalogsearchviewer .s7imagemapeffect .s7region

CSS属性

说明

背景

图像映射区域填充颜色。

在#RRGGBB、RGB(R,G,B)或RGBA(R,G,B,A)格式中指定。

背景颜色

图像映射区域填充颜色。

在#RRGGBB、RGB(R、G、B)或RGBA(R、G、B、A)格式中指定。

边界

图像映射区域边框样式。

指定为 宽度实体颜色 ,其中 宽度 以像素表示, 颜色 设置为#RRGGBB、RGB(R,G,B)或BA(R,G,A)。

示例 — 设置具有1像素黑色边框的透明图像映射区域:

.s7ecatalogsearchviewer .s7imagemapeffect .s7region { 
 border: 1px solid #000000; 
 background: RGBA(0,0,0,0);  
}

在此页面上