熱點和影像映射

檢視器會在主檢視上顯示熱點圖示，這些熱點原本是在AEM AssetsDynamic Media-隨選地區製作的。

主檢視器區域的CSS屬性

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

.s7carouselviewer .s7imagemapeffect .s7icon

CSS屬性

說明

背景影像

熱點表徵圖圖稿。

背景位置

如果使用CSS精靈，請放在圖稿精靈內。

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

背景色

影像地圖區域填滿顏色。

以 #RRGGBB 、 RGB(R,G,B)或 RGBA(R,G,B,A)格式指定此顏色。

border

影像地圖區域邊框樣式。 應指定為" width solid color "，其中 width 以像素表示， color 設為 #RRGBB , RGB(R,G,B))或 RGBA(R,G,B,A)。

範例——使用一個像素黑邊框來設定透明影像地圖區域：

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

本頁內容