連結區和影像地圖

上次更新: 2023-05-26
  • 建立對象:
  • Developer
    User

在熱點最初是在AEM Assets的Dynamic Media中編寫的位置,檢視器會在主檢視上顯示熱點圖示(隨選)。

主要檢視器區域的CSS屬性

熱點圖示的外觀由下列CSS類別選擇器控制:

.s7carouselviewer .s7imagemapeffect .s7icon

CSS屬性

說明

background-image

熱點圖示圖稿。

background-position

若使用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) 格式。

background-color

影像地圖區域填色色彩。

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

border

影像地圖區域邊框樣式。 應指定為" 寬度 純色 ",其中 寬度 以畫素表示,並且 顏色 設為 #RRGGBB RGB(R,G,B) ,或 RGBA(R,G,B,A) .

範例 — 以一個畫素的黑色邊框設定透明影像地圖區域:

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

本頁內容