热点和图像映射

在热点最初是在AEM AssetsDynamic Media中创作的地方，查看器会在主视图上显示热点图标 — 按需。

主查看器区域的CSS属性

通过以下CSS类选择器控制热点图标的外观：

.s7carouselviewer .s7imagemapeffect .s7icon

CSS属性

说明

背景图像

热点图标图稿。

背景位置

在图稿快照集内放置（如果使用CSS快照）。

请参阅 CSS Sprite 。

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)格式中指定此颜色。

背景颜色

图像映射区域填充颜色。

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

边界

图像映射区域边框样式。 应指定为" 宽度 实色"，其中宽度以像素表示，颜色设置为 #RRGGBB 、 RGB(R，G，B)或 RGBA(R，G，A)。

示例 — 使用一个像素黑色边框设置透明图像映射区域：

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

在此页面上