檢視器會在主檢視上顯示熱點圖示,這些熱點原本是在AEM Assets的Dynamic 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);
}