彈出縮放視圖

主視圖由靜態影像、彈出視圖中顯示的縮放影像、靜態影像上顯示的突出顯示導航區域以及靜態影像上顯示的提示消息組成。

如果所查看影像的尺寸與彈出縮放視圖的尺寸不匹配,則影像內容會置於彈出縮放視圖的矩形顯示區域中。

主檢視的CSS屬性

主要檢視的外觀由下列CSS類別選取器控制:

.s7flyoutviewer .s7flyoutzoomview

CSS屬性

說明

背景顏色

主視圖的背景顏色。

範例 — 若要讓主檢視透明:

.s7flyoutviewer .s7flyoutzoomview { 
 background-color: transparent; 
}

飛出檢視的CSS屬性

飛出檢視的外觀由下列CSS類別選取器控制:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

CSS屬性

說明

左側

彈出視圖相對於主視圖左上角的水準位置。

頂部

彈出視圖相對於主視圖左上角的垂直位置。

width

彈出視圖的寬度。

height

彈出視圖的高度。

border

彈出視圖的邊框。

範例 — 若要將彈出檢視設為600 x 400像素,以100像素的位移顯示,而512 x 288主檢視的右側有上一個範例所示:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom { 
 left: 612px; 
 top: 0px; 
 width: 600px; 
 height: 400px;  
}

主視圖中突出顯示的CSS屬性

主視圖中突出顯示的外觀由以下CSS類選擇器控制:

.s7flyoutviewer .s7flyoutzoomview .s7highlight

您可以使用CSS控制背景、邊框、透明度和類似屬性。 不過,反白顯示DOM元素的大小和位置由檢視器邏輯管理。 不支援透過CSS覆寫它。

CSS屬性

說明

背景顏色

突出顯示的顏色。

不透明度

突出顯示不透明度。

對於Internet Explorer 8,請使用 filter:alpha(opacity-...));

邊框

邊框醒目提示。

範例:若要設定透明度為40%的綠色高亮和一個像素紅色邊框:

.s7flyoutviewer .s7flyoutzoomview .s7highlight { 
 background-color: green; 
 opacity: 0.4;  
 filter: alpha(opacity = 40); 
 border: 1px solid red; 
}

游標的CSS屬性

highlightmode參數設定為cursor時,主視圖中的突出顯示將替換為固定大小的游標圖稿,該圖稿由CSS類選擇器控制:

 .s7flyoutviewer .s7flyoutzoomview 
.s7cursor

您可以使用CSS控制背景影像和大小。

適用的CSS屬性包括:

CSS屬性

說明

背景 — 影像

游標插圖。

寬度

游標寬度。

高度

游標高度。

注意

游標支援input屬性選擇器,它可用於為不同設備應用不同的游標圖稿和大小。 具體來說,input="mouse"對應於案頭系統,input="touch"對應於觸摸設備。

覆蓋的CSS屬性

overlay參數設定為1時,高亮幀或游標影像周圍的區域由CSS類選擇器控制:

 .s7flyoutviewer .s7flyoutzoomview 
.s7overlay

CSS屬性

說明

背景顏色

覆蓋顏色。

不透明度

覆蓋不透明度。

提示訊息的CSS屬性

提示訊息的外觀由下列CSS類別選取器控制:

.s7flyoutviewer .s7flyoutzoomview .s7tip

您可以透過CSS來設定字型樣式、大小外觀和垂直偏移。 不過,水準對齊方式是由檢視器邏輯管理。 不支援使用leftright屬性透過CSS覆寫它。

CSS屬性

說明

底部

從主視圖底部偏移。

color

文字色彩.

字型系列

字型名稱。

字型大小

字型大小.

填補

在訊息文字周圍填補。

背景顏色

消息文本的背景填充顏色。

邊框半徑

訊息文字的背景邊框半徑。

不透明度

消息文本的背景不透明度。

對於Internet Explorer 8,請使用 filter:alpha(opacity-...))

提示訊息可本地化。 如需詳細資訊,請參閱使用者介面元素本地化

示例 — 要設定半透明的尖端消息,其字型為白色Arial 12px,從主視圖底部偏移50像素,邊框間距和圓角:

.s7flyoutviewer .s7flyoutzoomview .s7tip { 
bottom: 50px; 
color: #ffffff; 
font-family: Arial; 
font-size: 12px; 
padding-bottom: 10px; 
padding-top: 10px; 
padding-left: 12px; 
padding-right: 12px; 
background-color: #000000; 
border-radius: 4px; 
opacity: 0.5; 
filter: alpha(opacity = 50); 
}

本頁內容