如果互動資料是在設定中傳遞給檢視器,互動色票面板會出現在視訊內容旁。 它由頂端的橫幅組成,可轉譯文字,例如「按一下以檢視」、一欄或多欄互動式色票和兩個捲動按鈕(僅適用於案頭系統)。
在桌上型電腦系統和觸控裝置上,以橫向顯示互動式色票會垂直呈現在視訊內容的右側。 在縱向的觸控裝置上,它們會以水準色票列的形式出現在檢視器底部。
下列CSS類別選取器可控制互動式色票面板的位置和方向:
.s7interactivevideoviewer .s7interactiveswatches
width |
互動式色票面板的寬度 |
height |
互動式色票面板的高度。 |
頂部 |
互動式色票面板的頂端位置。 |
底部 |
互動式色票面板的底部位置。 |
左側 |
互動式色票面板的左側位置。 |
右側 |
互動式色票面板的右側位置。 |
互動式色票面板的執行時期位置和方向是由上述CSS屬性的組合所定義,如下所示:
您可搭配使用CSS標籤和此樣式,以調整互動式色票面板的位置。
若要設定互動式色票面板,以便在觸控裝置上以橫向方向在檢視器底部水準演算,並在其他所有情況下以垂直方向顯示視訊內容:
.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
width:120px;
height:auto;
right:0px;
top:0px;
left:auto;
bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
width:auto;
height:136px;
right:auto;
top:auto;
left:0px;
bottom:0px;
}
橫幅的大小和位置是由互動式色票元件根據CSS套用的其他樣式來管理,無法明確設定。
下列CSS類別選取器會控制橫幅面板的外觀:
.s7interactivevideoviewer .s7interactiveswatches .s7banner
背景色 |
橫幅面板的背景顏色。 |
color |
橫幅面板內的文字顏色。 |
border |
橫幅面板的邊框。 |
字型粗細 |
橫幅面板內文字的字型粗細。 |
字型大小 |
橫幅面板內文字的字型大小。 |
font-family |
用於橫幅面板內文字的字型系列。 |
font-align |
橫幅面板內文字的字型對齊方式。 |
橫幅工具提示可以本地化。 如需詳細資訊,請參閱使用者介面元素的本地化。
若要設定具有深灰色背景、較淺灰色的兩像素邊框和水準置中的白色文字的橫幅:
.s7interactivevideoviewer .s7interactiveswatches .s7banner {
background-color: #222222;
border-bottom: 2px solid #444444;
color: #ffffff;
text-align: center;
}
下列CSS類別選擇器控制色票的外觀:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches
背景色 |
色票區域的背景顏色。 |
要設定具有深灰色背景的色板區域,請執行以下操作:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
background-color: #222222;
}
下列CSS類別選擇器控制色票縮圖之間的間距:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell
margin |
每個縮圖周圍的水準和垂直邊界大小。 實際縮圖間距等於 .s7thumbcell 左右邊界集的總和。 |
要將垂直間距設定為10像素:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
margin: 5px;
}
下列CSS類別選取器會控制個別縮圖的外觀:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb
寬度 |
縮圖寬度。 |
高度 |
縮圖的高度。 |
邊界 |
縮圖邊框。 |
縮圖支援state
屬性選擇器,您可使用它將不同的外觀套用至不同的縮圖狀態。 尤其state="selected"
對應於目前選取之影像的縮圖;state="default"
對應其餘縮圖;state="over"
用於滑鼠暫留。
若要設定100 x 75像素的縮圖:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
width:100px;
height:75px;
}
下列CSS類別選取器會控制縮表徵圖簽的外觀:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label
顏色 |
文字色彩. |
邊界 |
標籤邊框。 |
text-align |
水準文字對齊。 |
font-family |
字型名稱。 |
要設定標籤,使用左對齊、白色、12像素、Helvetica字型和底部邊框:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
border-bottom: 1px solid #e9e9e9;
text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}
下列CSS類別選取器會控制向上和向下捲動按鈕的外觀:
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton
.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton
無法使用CSS top
、left
、bottom
和right
屬性來定位捲動按鈕;檢視器邏輯會自動定位。
寬度 |
捲動按鈕的寬度。 |
高度 |
捲動按鈕的高度。 |
背景影像 |
為指定按鈕狀態顯示的影像。 |
背景位置 |
如果使用CSS精靈,圖稿精靈內的位置。 另請參閱 CSS精靈。 |
此按鈕支援state
屬性選擇器,您可使用它將不同的外觀套用至按鈕狀態:" up
"、" down
"、" over
"和" disabled
"。
按鈕工具提示可以本地化。 如需詳細資訊,請參閱使用者介面元素的本地化。
若要設定60 x 36像素的向上捲動按鈕,請針對每個狀態使用不同的圖稿,並從元件的Sprite影像擷取該圖稿:
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
background-size: 120px;
width: 60px;
height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }