影像地圖效果

根據mode引數的值，檢視器會在地圖原本是在Dynamic Media Classic中製作的位置的主檢視上顯示影像地圖圖示。 或者，它會呈現與原始影像地圖形狀相符的確切區域。

主要檢視器區域的CSS屬性

影像地圖圖示的外觀由下列CSS類別選取器控制：

.s7ecatalogviewer .s7imagemapeffect .s7icon
注意

此 s7mapoverlay 過去用來設定影像地圖圖示樣式的CSS類別現已棄用；請使用 s7icon 而非。

CSS屬性

說明

background-image

影像地圖圖示圖稿。

background-position

若使用CSS sprite，則定位在圖稿sprite內。

另請參閱 CSS精靈 .

width

影像地圖圖示寬度（畫素）。

height

影像地圖圖示高度（畫素）。

注意

影像地圖圖示支援 state 屬性選取器，可用來將不同的外觀元素套用至的圖示狀態 default 和 active.

範例 — 設定28 x 28畫素的影像地圖圖示，針對兩種不同的圖示狀態分別顯示不同的影像。

.s7ecatalogviewer .s7imagemapeffect .s7icon {
 height: 28px;
 width: 28px;
 background-image: url(images/v2/ImageMapEffect_dark_up.png);
}
.s7ecatalogviewer .s7imagemapeffect .s7icon[state="default"] {
 opacity: 0.5;
}
.s7ecatalogviewer .s7imagemapeffect .s7icon[state="active"] {
opacity: 1;
}

另請參閱 影像地圖支援.

影像地圖區域的外觀由下列CSS類別選取器控制：

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

範例 — 設定透明影像地圖區域，使用 1 畫素黑色邊框：

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

本頁內容