图像映射效果 image-map-effect

根据mode参数的值,查看器会在映射最初在Dynamic Media Classic中创作的位置的主视图上显示图像映射图标。 或者,它呈现与原始图像映射形状匹配的精确区域。

主查看器区域的​ CSS属性

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

.s7ecatalogviewer .s7imagemapeffect .s7icon
NOTE
以前用于设置图像映射图标样式的s7mapoverlay CSS类现已弃用;请改用s7icon
CSS属性
说明
背景图像
图像映射图标图稿。
背景位置

如果使用CSS sprite,则定位在图稿sprite中。

另请参阅 CSS Sprite

宽度
图像映射图标宽度(像素)。
高度
图像映射图标高度(以像素为单位)。
NOTE
图像映射图标支持state属性选择器,您可以使用它对defaultactive的图标状态应用不同的外观。

示例 — 设置一个28 x 28像素的图像映射图标,该图标为两种不同的图标状态分别显示不同的图像。

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

另请参阅图像映射支持

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

.s7ecatalogviewer .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)或RGBA(R,G,B,A)。

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

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