熱點和影像映射

檢視器會在主檢視上顯示熱點圖示，這些地方的熱點原本是在AEM Assets的Dynamic Media（隨選）中撰寫。

主查看器區域的CSS屬性

熱點表徵圖的外觀由以下CSS類選擇器控制：

.s7carouselviewer .s7imagemapeffect .s7icon

CSS屬性

說明

背景 — 影像

熱點表徵圖圖。

背景位置

如果使用CSS精靈，則位於圖稿精靈內。

請參閱 CSS Sprites 。

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

border

影像映射區域邊框樣式。 應指定為" 寬度 實色"，其中寬度以像素表示，而顏色設定為 #RRGGBB 、 RGB(R,G,B)或 RGBA(R,G,B,A)<a3/。

示例 — 使用一個像素黑色邊框設定透明影像映射區域：

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

本頁內容