互動色票

如果互動資料是在設定中傳遞給檢視器,互動色票面板會出現在視訊內容旁。 它由頂端的橫幅組成,可轉譯文字,例如「按一下以檢視」、一欄或多欄互動式色票和兩個捲動按鈕(僅適用於案頭系統)。

在桌上型電腦系統和觸控裝置上,以橫向顯示互動式色票會垂直呈現在視訊內容的右側。 在縱向的觸控裝置上,它們會以水準色票列的形式出現在檢視器底部。

下列CSS類別選取器可控制互動式色票面板的位置和方向:

.s7interactivevideoviewer .s7interactiveswatches

互動色票的CSS屬性

width

互動式色票面板的寬度

height

互動式色票面板的高度。

頂部

互動式色票面板的頂端位置。

底部

互動式色票面板的底部位置。

左側

互動式色票面板的左側位置。

右側

互動式色票面板的右側位置。

互動式色票面板的執行時期位置和方向是由上述CSS屬性的組合所定義,如下所示:

  • 若要在檢視器底部以水準方式呈現互動式色票,請將高度設定為絕對像素值;左下至0px;寬度、右側和自動上下。
  • 若要在視訊內容的右側垂直呈現互動式色票,請將寬度設定為絕對像素;右上至0px;高度,從左到右,自動。

您可搭配使用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

橫幅面板的CSS屬性

背景色

橫幅面板的背景顏色。

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

色票區域的CSS屬性

背景色

色票區域的背景顏色。

範例

要設定具有深灰色背景的色板區域,請執行以下操作:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches { 
    background-color: #222222; 
}

下列CSS類別選擇器控制色票縮圖之間的間距:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

色票縮圖間距的CSS屬性

margin

每個縮圖周圍的水準和垂直邊界大小。 實際縮圖間距等於 .s7thumbcell 左右邊界集的總和。

範例

要將垂直間距設定為10像素:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell { 
 margin: 5px; 
}

下列CSS類別選取器會控制個別縮圖的外觀:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

個別縮圖外觀的CSS屬性

寬度

縮圖寬度。

高度

縮圖的高度。

邊界

縮圖邊框。

注意

縮圖支援state屬性選擇器,您可使用它將不同的外觀套用至不同的縮圖狀態。 尤其state="selected"對應於目前選取之影像的縮圖;state="default"對應其餘縮圖;state="over"用於滑鼠暫留。

範例

若要設定100 x 75像素的縮圖:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb { 
 width:100px; 
 height:75px; 
}

下列CSS類別選取器會控制縮表徵圖簽的外觀:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

縮表徵圖簽外觀的CSS屬性

顏色

文字色彩.

邊界

標籤邊框。

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 topleftbottomright屬性來定位捲動按鈕;檢視器邏輯會自動定位。

上下捲動按鈕外觀的CSS屬性

寬度

捲動按鈕的寬度。

高度

捲動按鈕的高度。

背景影像

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

背景位置

如果使用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; }

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now