操作調用 call-to-action
「呼叫動作」面板會在視訊結束時顯示,並顯示與特定視訊相關的所有互動色票。
該面板由顯示視訊標題的標題區域、右上角的重播按鈕以及顯示為可捲動格線的實際互動色票組成。 您可以使用callToActionRecap設定屬性來停用面板。
動作呼叫面板一律會取用整個可用檢視器區域。
下列CSS類別選取器會控制動作呼叫面板中背景顏色的外觀:
.s7interactivevideoviewer .s7calltoaction
行動號召面板背景顏色的CSS屬性 css-properties-of-the-background-color-of-the-call-to-action-panel
範例 example
若要設定具有深灰色背景的呼叫動作面板:
.s7interactivevideoviewer .s7calltoaction {
background-color: #222222;
}
下列CSS類別選取器會控制動作呼叫面板中標題的外觀:
.s7interactivevideoviewer .s7calltoaction .s7header
動作面板標頭呼叫的CSS屬性 css-properties-of-the-call-to-action-panel-header
範例 example-1
若要設定高70畫素的標題,且背景為深灰色,底部有兩個畫素框線為淺灰色:
.s7interactivevideoviewer .s7calltoaction .s7header {
height: 70px;
border-bottom: 2px solid #444444;
background-color: #222222;
}
下列CSS類別選取器會控制動作呼叫面板中標題標題的外觀:
.s7interactivevideoviewer .s7calltoaction .s7header .s7title
行動號召面板中標題標題的CSS屬性: css-properties-of-the-header-title-in-the-call-to-action-panel
範例 example-2
若要設定具有70畫素行高、25畫素字型大小、白色且靠左對齊的視訊標題:
.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
line-height: 70px;
font-size: 25px;
color: #ffffff;
text-align: left;
}
下列CSS類別選取器會控制動作呼叫面板中關閉按鈕的外觀:
.s7interactivevideoviewer .s7calltoaction .s7closebutton
動作呼叫面板中關閉按鈕的CSS屬性: css-properties-of-the-close-button-in-the-call-to-action-panel
state
屬性選取器,可用來將不同的外觀元素套用至不同的按鈕狀態。範例 example-3
設定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屬性: css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel
範例 example-4
若要設定具有深灰色背景的縮圖區域:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
background-color: #222222;
}
下列CSS類別選取器會控制動作呼叫面板中縮圖儲存格的外觀:
.s7interactivevideoviewer .s7calltoaction .s7thumbcell
行動號召面板中縮圖儲存格的CSS屬性: css-properties-of-the-thumbcell-in-the-call-to-action-panel
範例 example-5
若要設定24畫素的水準間距和18畫素的垂直間距:
.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
margin-top: 9px;
margin-bottom: 9px;
margin-left: 12px;
margin-right: 12px;
}
下列CSS類別選取器會控制動作呼叫面板中縮圖的外觀:
.s7interactivevideoviewer .s7calltoaction .s7thumb
行動號召面板中縮圖的CSS屬性: css-properties-of-the-thumbnail-in-the-call-to-action-panel
state
屬性選取器,可用來將不同的外觀元素套用至不同的縮圖狀態。 特別是,state="selected"
對應於目前選取之影像的縮圖;state="default"
對應於其餘的縮圖;state="over"
用於滑鼠懸停時。範例 example-6
若要設定94 x 100畫素的縮圖:
.s7interactivevideoviewer .s7calltoaction .s7thumb {
width:94px;
height:100px;
}
下列CSS類別選取器會控制動作呼叫面板中縮圖示籤的外觀:
.s7interactivevideoviewer .s7calltoaction .s7label
行動號召面板中縮圖示籤的CSS屬性: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel
範例 example-7
若要設定使用白色的標籤,請置中對齊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屬性: css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel
範例 example-8
若要設定寬度為22畫素的卷軸,且從縮圖區域的上方、右側或底部起沒有任何邊界:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
top:0px;
bottom:0px;
right:0px;
width:22px;
}
卷軸軌跡是上下卷軸按鈕之間的區域。 元件會自動設定軌跡的位置和高度。
下列CSS類別選取器會控制動作呼叫面板中卷軸追蹤的外觀:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack
捲動追蹤列的CSS屬性 css-properties-of-the-scroll-track-bar
範例 example-9
若要設定寬度為22畫素且為灰色的卷軸軌跡:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:22px;
background-color:#222222;
}
卷軸縮圖在捲動軌跡區域內垂直移動。 其垂直位置完全由元件邏輯控制,但縮圖高度不會隨著內容量而動態變更。
下列CSS類別選取器會控制縮圖高度和其他外觀的外觀:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb
動作呼叫面板中縮圖高度的CSS屬性: css-properties-of-the-thumb-height-in-the-call-to-action-panel
state
屬性選取器,可用來將不同的外觀元素套用至下列不同的縮圖狀態: "up"
、"down"
、"over"
和"disabled"
。範例 example-10
若要設定卷軸縮圖,其大小為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屬性: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel
state
屬性選取器,可用來將不同的外觀元素套用至下列不同的縮圖狀態: "up"
、"down"
、"over"
和"disabled"
。按鈕工具提示可本地化。 請參閱使用者介面元素的本地化。
範例 example-11
將捲動按鈕的大小設為0並隱藏以停用捲動按鈕:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
visibility: hidden;
width: 0px;
height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
visibility: hidden;
width: 0px;
height: 0px;
}