影像地圖效果

視模式參數的值而定，檢視器會在主檢視上顯示影像地圖圖示，而主檢視的地圖原本是在Dynamic Media經典中製作，或轉譯與原始影像地圖形狀相符的精確區域。

主檢視器區域的CSS屬性

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

.s7ecatalogviewer .s7imagemapeffect .s7icon
注意

過去用來設定影像地圖圖示樣式的s7mapoverlay CSS類別現在已不再使用；請改用s7icon。

CSS屬性

說明

背景影像

影像地圖圖示圖稿。

背景位置

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

另請參閱 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)格式中指定。

背景色

影像地圖區域填滿顏色。

在#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);  
}

本頁內容