操作調用

「呼叫動作」面板會在視訊結束時顯示，並顯示與特定視訊相關的所有互動色票。

該面板由顯示視訊標題的標題區域、右上角的重播按鈕，以及顯示為可捲動格線的實際互動色票組成。您可以使用來停用面板 callToActionRecap 設定屬性。

動作呼叫面板一律會取用整個可用的檢視器區域。

下列CSS類別選取器會控制動作呼叫面板中背景顏色的外觀：

.s7interactivevideoviewer .s7calltoaction

呼叫動作面板的背景顏色的CSS屬性

background-color

行動號召面板的背景顏色。

範例

若要設定具有深灰色背景的行動號召面板：

.s7interactivevideoviewer .s7calltoaction {
    background-color: #222222;
}

下列CSS類別選擇器會控制動作呼叫面板中標題的外觀：

.s7interactivevideoviewer .s7calltoaction .s7header

動作呼叫面板標頭的CSS屬性

background-color	標題的背景顏色。
height	頁首的高度。
下邊框	標頭的底部邊框。

範例

若要設定高度為70畫素的標頭，其背景為深灰色，底部為略淺灰色的兩個畫素框線：

.s7interactivevideoviewer .s7calltoaction .s7header {
    height: 70px;
    border-bottom: 2px solid #444444;
    background-color: #222222;
}

下列CSS類別選擇器會控制動作呼叫面板中標題標題的外觀：

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

行動號召面板中標題標題的CSS屬性：

color	橫幅內的文字顏色。
font-size	字型大小.
line-height	行高。
font-family	字型系列。
text-align	橫幅中文字的對齊方式。
左內邊距	左內距。
右內邊距	右內邊距，為「重播」按鈕留出空間。

範例

若要設定具有70畫素行高、25畫素字型大小、白色和靠左對齊的視訊標題：

.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
    line-height: 70px;
    font-size: 25px;
    color: #ffffff;
    text-align: left;
}

下列CSS類別選擇器會控制動作呼叫面板中關閉按鈕的外觀：

.s7interactivevideoviewer .s7calltoaction .s7closebutton

動作呼叫面板中關閉按鈕的CSS屬性：

頂部	從標頭頂端的位置，包括內距。
右側	從標頭右側的位置，包括內距。
width	按鈕寬度。
height	按鈕高度。
background-image	針對指定按鈕狀態顯示的影像。
background-position	若使用CSS拼貼，則定位在圖稿拼貼內。另請參閱 CSS精靈 .

注意

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

範例

若要設定28 x 28畫素的重播按鈕。按鈕的位置必須從標頭的頂端和右側邊緣起算20畫素。而且，它必須為四種不同按鈕狀態的每種顯示不同的影像；會從元件的Sprite影像中取得圖稿：

.s7interactivevideoviewer .s7calltoaction .s7closebutton {
 top: 20px;
 right: 20px;
 background-size: 336px;
 width: 28px;
 height: 28px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] {
 background-image: url(images/v2/PlayPauseButton_sprite.png);
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] {
 background-position: -28px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] {
 background-position: -0px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] {
 background-position: -28px -1232px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] {
 background-position: -0px -1232px;
}

下列CSS類別選取器會控制動作呼叫面板中縮圖格線檢視的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

行動號召面板中縮圖格線檢視的CSS屬性：

background-color

縮圖區域的背景色彩。

範例

若要設定具有深灰色背景的縮圖區域：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
    background-color: #222222;
}

下列CSS類別選擇器會控制動作呼叫面板中縮圖儲存格的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

行動號召面板中縮圖儲存格的CSS屬性：

margin

每個縮圖周圍水平與垂直邊界的大小。

實際水準縮圖間距等於為設定的左右邊界總和 .s7thumbcell . 同樣的規則也適用於垂直間距。

範例

若要設定24畫素的水準間距和18畫素的垂直間距：

.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
 margin-top: 9px;
 margin-bottom: 9px;
 margin-left: 12px;
 margin-right: 12px;
}

下列CSS類別選取器會控制動作呼叫面板中縮圖的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumb

行動號召面板中縮圖的CSS屬性：

width	縮圖的寬度。
height	縮圖的高度。
border	縮圖的邊框。

注意

縮圖支援 state 屬性選擇器，可將不同的外觀元素套用至不同的縮圖狀態。尤其是， state="selected" 對應於目前所選影像的縮圖； state="default" 對應至其餘的縮圖； state="over" 用於滑鼠游標暫留時。

範例

若要設定94 x 100畫素的縮圖：

.s7interactivevideoviewer .s7calltoaction .s7thumb {
 width:94px;
 height:100px;
}

下列CSS類別選取器會控制動作呼叫面板中縮圖示籤的外觀：

.s7interactivevideoviewer .s7calltoaction .s7label

行動號召面板中縮圖示籤的CSS屬性：

color	標籤的文字色彩。
text-align	標籤的水準對齊方式。
font-family	字型名稱。
font-size	字型系列。

範例

若要設定使用白色顏色的標籤，請置中對齊15畫素，然後使用Arial®字型：

.s7interactivevideoviewer .s7calltoaction .s7label {
 text-align: center;
 color: #ffffff;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 15px;
}

如果縮圖數目超過可垂直放入檢視的數目，縮圖會在右側呈現垂直卷軸。依預設，動作呼叫面板會呈現一個沒有拇指和捲動按鈕的小垂直條。不過，您可以變更檢視器CSS來自訂列。

下列CSS類別選擇器會控制動作呼叫面板中卷軸區域的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

行動號召面板中卷軸區域的CSS屬性：

width	卷軸寬度。
頂部	垂直卷軸從縮圖區域頂部位移。
底部	垂直卷軸從縮圖區域底部位移。
右側	水準卷軸從縮圖區域的右邊緣位移。

範例

若要設定寬度為22畫素的卷軸，且從縮圖區域的上方、右側或下方起沒有任何邊界，請執行下列動作：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:22px;
}

卷軸軌跡是上下卷軸按鈕之間的區域。元件會自動設定軌跡的位置和高度。

下列CSS類別選擇器會控制動作呼叫面板中卷軸軌跡的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

捲動軌跡列的CSS屬性

width	卷軸寬度。
background-color	軌跡列的背景顏色。

範例

若要設定寬度為22畫素且為灰色的卷軸軌跡：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:22px;
 background-color:#222222;
}

卷軸縮圖會在捲動軌跡區域內垂直移動。其垂直位置完全由元件邏輯控制，但縮圖高度不會隨著內容量而動態變更。

下列CSS類別選取器會控制縮圖高度和其他外觀的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

動作呼叫面板中縮圖高度的CSS屬性：

width	縮圖的寬度。
height	縮圖高度。
上內邊距	磁軌頂端之間的垂直邊框間距。
下內邊距	軌道底部之間的垂直邊框間距。
border-radius	邊框半徑。
background-color	縮圖的顏色。
background-image	針對指定縮圖狀態顯示的影像。
background-position	若使用CSS sprite，則定位在圖稿sprite內。另請參閱 CSS精靈 .

注意

縮圖支援 state 屬性選擇器，可將不同的外觀元素套用至下列不同的縮圖狀態： "up"， "down"， "over"、和 "disabled".

範例

若要設定卷軸縮圖，其大小為6 x 167畫素、有三個畫素圓角，且為灰色：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
 width:6px;
 height:167px;
 background-color:#666666;
 background-image:none;
 border-radius:3px 3px 3px 3px;
}

下列CSS類別選取器會控制頂端和底部捲動按鈕的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

無法使用CSS top、left、bottom或right屬性來定位捲動按鈕；檢視器邏輯會自動加以定位。互動式視訊檢視器中的動作呼叫面板不會在卷軸中使用這些按鈕，因此會在預設的CSS中將它們的大小設為0畫素。

行動號召面板中頂端和底部捲動按鈕的CSS屬性：

width	按鈕的寬度。
height	按鈕的高度。
background-image	針對指定按鈕狀態顯示的影像。
background-position	若使用CSS sprite，則定位在圖稿sprite內。另請參閱 CSS精靈 .

注意

這些按鈕支援 state 屬性選擇器，可將不同的外觀元素套用至下列不同的縮圖狀態： "up"， "down"， "over"、和 "disabled".

按鈕工具提示可以本地化。另請參閱使用者介面元素的本地化.

範例

將捲動按鈕的大小設為0並隱藏以停用捲動按鈕：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}

Business.Adobe.com 資源

Style System Embedded Charts Content As A Service Dynamic Media Digital Rights Management Digital Asset Management