热点和图像映射 hotspots-and-image-maps

当热点最初是在AEM Assets的Dynamic Media中创作时,查看器会在主视图上显示热点图标(按需)。

主查看器区域的CSS属性

热点图标的外观由以下CSS类选择器控制:

.s7carouselviewer .s7imagemapeffect .s7icon
CSS属性
说明
background-image
热点图标图稿。
background-position

如果使用CSS sprite,则定位到图稿sprite内。

参见 CSS脚本.

width
热点图标宽度。
height
热点图标高度。

示例 — 设置一个56 x 56像素的热点图标,该图标为两种不同的图标状态分别显示不同的图像:

.s7interactiveimage .s7imagemapeffect .s7icon {
 background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png);
 width: 56px;
 height: 56px;
}
.s7interactiveimage .s7imagemapeffect .s7icon:hover {
 background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_over_touch.png);
}

图像映射区域的CSS属性

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

.s7carouselviewer .s7imagemapeffect .s7region

CSS属性
说明
背景

图像映射区域填充颜色。

指定此颜色于 #RRGGBB , RGB(R,G,B) ,或 RGBA(R,G,B,A) 格式。

background-color

图像映射区域填充颜色。

指定此颜色于 #RRGGBB , RGB(R,G,B) ,或 RGBA(R,G,B,A) 格式。

边界
图像映射区域边框样式。 应指定为'' 宽度 纯色 “”,其中 宽度 以像素表示,并且 颜色 设置为 #RRGGBB , RGB(R,G,B) ,或 RGBA(R,G,B,A) .

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

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