資訊面板快顯視窗

當使用者啟動影像地圖時，「資訊面板彈出畫面」會顯示在檢視器區域的中央，該影像地圖具有Scene7 Publishing System中定義的rollover_key屬性，且如果已為檢視器正確設定資訊面板功能。

資訊面板背景涵蓋整個檢視器區域，並由下列CSS類別選擇器控制：

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

CSS屬性

說明

背景影像

資訊面板背景填色。

背景位置

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

另請參閱 CSS精靈。

範例——設定資訊面板快顯視窗以使用半透明的黑色背景。

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay { 
 background-color : rgba(0,0,0,0.75); 
}

依預設，資訊面板對話方塊會顯示在檢視器區域的中央。 不過，您也可以使用CSS類別選取器來控制其大小、對齊、背景和邊框。

.s7ecatalogviewer .s7infopanelpopup .s7overlay

CSS屬性

說明

左側

檢視器區域面板背景填滿中資訊面板對話框的水準位置。

頂部

檢視器區域內資訊面板對話方塊的垂直位置。

width

對話框寬度。

height

對話框高度。

左邊距

資訊面板對話方塊的左側邊界可用於居中。

邊距頂端

資訊面板對話方塊的頂端邊界可用於居中。

填補

內部對話框填充。

背景色

對話框背景顏色。

邊框半徑

對話框邊框半徑。

方塊陰影

對話框陰影。

範例——在檢視器區域中設定300 x 200像素的資訊面板對話方塊；頂部有40像素間距，其他所有邊上有10像素間距，有淺灰色背景，有10像素邊框半徑和陰影。

.s7ecatalogviewer .s7infopanelpopup .s7overlay { 
 left: 50%; 
 top: 50%; 
 margin-left: -150px; 
 margin-top: -100px; 
 width: 300px; 
 height: 200px; 
 padding-top: 40px; 
 padding-right: 10px; 
 padding-bottom: 10px; 
 padding-left: 10px; 
 background-color:rgb(221,221,221); 
 border-radius: 10px 10px 10px 10px; 
box-shadow: 0 0 5px rgba(0,0,0,0.25);  
}

「資訊面板」(Info Panel)對話框具有關閉按鈕，按一下或點選按鈕將關閉對話框。

此按鈕的外觀由下列CSS類別選擇器控制：

.s7ecatalogviewer .s7infopanelpopup .s7closebutton

CSS屬性

說明

頂部

從對話框的上邊框定位。

右側

從對話框的右邊框定位。

左側

從對話框左邊框中的位置。

底部

從對話框底部邊框的位置。

寬度

按鈕寬度。

高度

按鈕高度。

背景影像

為指定按鈕狀態顯示的影像。

背景位置

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

另請參閱 CSS精靈。

注意

此按鈕支援state屬性選擇器，您可使用它將不同的外觀套用至不同的按鈕狀態。

按鈕工具提示可以本地化。 如需詳細資訊，請參閱使用者介面元素的本地化。

範例——若要設定對話框關閉按鈕（28 x 28像素），從資訊面板對話框的上邊緣和右邊緣放置5像素，並針對四個不同的按鈕狀態顯示不同的影像。

.s7ecatalogviewer .s7infopanelpopup .s7closebutton { 
 width: 28px; 
 height: 28px; 
 top: 5px; 
 right: 5px; 
} 
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="up"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png); 
} 
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="over"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_over.png); 
} 
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="down"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png); 
} 
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="disabled"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png); 
}

本頁內容