热点和图像映射

最近更新： 2024年7月20日

主题：

创建对象：

开发人员
用户

对于最初在AEM Assets的Dynamic Media中创作热点的位置，查看器会在主视图上显示热点图标（按需）。

主查看器区域的 CSS属性

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

.s7carouselviewer .s7imagemapeffect .s7icon

CSS属性	说明
背景图像	热点图标图稿。
背景位置	如果使用CSS拼写，则定位到图稿拼写内。请参阅 CSS拼写。
宽度	热点图标宽度。
高度	热点图标高度。

示例 — 设置一个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，B，A) 。

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) 。

示例 — 设置一个透明的图像映射区域，其中带有一个像素的黑色边框：

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

recommendation-more-help