主色票

主色票由一行縮圖影像組成,左側和右側有可選的捲動按鈕。 只有當所有縮圖都無法放入容器寬度時,捲動按鈕才會顯示在案頭上。 在行動裝置上,或如果縮圖可符合容器寬度,則不會顯示捲動按鈕。

使用CSS類選擇器控制色板容器的外觀:

.s7mixedmediaviewer .s7swatches

色票的CSS屬性

height

色票的高度。

底部

垂直色票相對於檢視器容器偏移。

範例:設定高度為100像素的色票。

.s7mixedmediviewer .s7swatches { 
 height: 100px;  
}

使用以下CSS類選擇器控制色板縮略圖之間的間距:

.s7mixedmediaviewer .s7swatches .s7thumbcell

CSS屬性

說明

margin

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

範例

要將間距設定為垂直和水準的10個像素。

.s7mixedmediaviewer .s7swatches .s7thumbcell { 
 margin: 5px; 
}

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

.s7mixedmediaviewer .s7swatches .s7thumb

CSS屬性

說明

width

縮圖寬度。

高度

縮圖的高度。

border

縮圖的邊框。

注意

縮圖支援state屬性選取器,可用來將不同外觀套用至不同的縮圖狀態。 尤其是, state="selected"對應於當前顯示在主視圖中的影像的縮略圖, state="default"對應於其餘的縮略圖,並且state="over"用於滑鼠懸停。

範例 — 若要設定縮圖,縮圖為56 x 56像素、有淺灰色預設邊框和深灰色選取的邊框。

.s7mixedmediaviewer .s7swatches .s7thumb { 
 width: 56px; 
 height: 56px;  
} 
.s7mixedmediaviewer .s7swatches .s7thumb[state="default"] { 
 border: 1px solid #dddddd; 
} 
.s7mixedviewer .s7swatches .s7thumb[state="selected"] { 
 border: 1px solid #666666; 
}

資產類型會顯示為覆蓋在縮圖影像上的圖示,並透過下列CSS類別選取器加以控制:

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay

CSS屬性

說明

寬度

圖示覆蓋的寬度。

高度

圖示覆蓋的高度。

覆蓋圖支援type屬性選取器,具有下列可能值:image(適用於單一影像)、swatchset(適用於色票集)、spinset(適用於回轉集)和video(適用於單一視訊或最適化視訊集)。

範例:若要設定回轉集、色票集和視訊的圖示覆蓋:

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] { 
 background-image: url(images/v2/ThumbOverlaySwatchSet.png);  
} 
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] { 
 background-image: url(images/v2/ThumbOverlaySpinSet.png);  
} 
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] { 
 background-image: url(images/v2/ThumbOverlayVideo.png);  
}

左和右捲動按鈕的外觀由下列CSS類選擇器控制:

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7swatches .s7scrollrightbutton

無法使用CSS topleftbottomright屬性來定位捲動按鈕。 檢視器邏輯會自動定位。

CSS屬性

說明

寬度

捲動按鈕的寬度。

高度

捲動按鈕的高度。

背景 — 影像

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

背景位置

如果使用CSS精靈,則位於圖稿精靈內。

請參閱 CSS Sprites

注意

此按鈕支援state屬性選擇器,可用於將不同的外觀應用於不同的按鈕狀態:updownoverdisabled

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

示例 — 設定56 x 56像素的捲動按鈕,每個狀態的圖稿都不同。

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{ 
background-image:url(images/v2/ScrollLeftButton_up.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{ 
 background-image:url(images/v2/ScrollLeftButton_over.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{ 
 background-image:url(images/v2/ScrollLeftButton_down.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollLeftButton_disabled.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{ 
background-image:url(images/v2/ScrollRightButton_up.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{ 
 background-image:url(images/v2/ScrollRightButton_over.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{ 
 background-image:url(images/v2/ScrollRightButton_down.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollRightButton_disabled.png); 
}

本頁內容