視模式參數的值而定,檢視器會在主檢視上顯示影像地圖圖示,而主檢視的地圖原本是在Scene7 Publishing System中製作,或轉譯與原始影像地圖形狀相符的精確區域。
主檢視器區域的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);
}