彈出縮放視圖

主視圖由靜態影像和彈出視圖中顯示的縮放影像組成。 它還包含顯示在靜態影像上的突出顯示導航區域，以及顯示在靜態影像上的提示消息。

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

主檢視的CSS屬性

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

.s7flyoutviewer .s7flyoutzoomview

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

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

飛出檢視的CSS屬性

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

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

範例 — 若要將彈出檢視設為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覆寫它。

範例：若要設定透明度為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屬性

當 overlay 參數設為 1，則高亮框或游標影像周圍的區域由CSS類選擇器控制：

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

提示訊息的CSS屬性

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

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

提示訊息可本地化。 請參閱 用戶介面元素本地化 以取得更多資訊。

示例 — 要設定半透明的提示消息，其字型為白色Arial® 12像素，距主視圖底部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);
}