インタラクティブスウォッチ

インタラクティブデータが設定でビューアに渡されると、インタラクティブスウォッチパネルがビデオコンテンツの横に表示されます。上部に表示されるバナーは、「クリックして表示」、1つ以上のインタラクティブスウォッチの列、2つのスクロールボタン（デスクトップシステムのみ）などのテキストをレンダリングします。

デスクトップシステムおよびタッチデバイスでは、横置きレイアウトでは、インタラクティブスウォッチがビデオコンテンツの右に縦にレンダリングされます。縦置きのタッチデバイスでは、スウォッチはビューアの下部に水平方向の行として表示されます。

以下に示すCSSクラスセレクターで、インタラクティブスウォッチパネルの位置と方向を制御します。

.s7interactivevideoviewer .s7interactiveswatches

インタラクティブスウォッチのCSSプロパティ

width	インタラクティブスウォッチパネルの幅
height	インタラクティブスウォッチパネルの高さ。
トップ	インタラクティブスウォッチパネルの上部の位置。
下	インタラクティブスウォッチパネルの下の位置。
左	インタラクティブスウォッチパネルの左側の位置。
右	インタラクティブスウォッチパネルの右側の位置。

インタラクティブスウォッチパネルの実行時の場所と向きは、上記のCSSプロパティを次のように組み合わせて定義します。

インタラクティブスウォッチをビューアの下部で水平方向にレンダリングするには、高さを絶対ピクセル値に設定します。left, bottom to 0px;width, right, top to auto
インタラクティブスウォッチをビデオコンテンツの右側に垂直方向にレンダリングするには、幅を絶対ピクセルに設定します。rightとtop to 0px;height, left, bottom to auto

このスタイル設定と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

background-color	バナーパネルの背景色。
color	バナーパネル内のテキストカラー。
枠線	バナーパネル周囲の境界線。
font-重み付け	バナーパネル内のテキストに使用するフォント重み付け。
font-size	バナーパネル内のテキストに使用するフォントサイズです。
font-family	バナーパネル内のテキストに使用するフォントファミリー。
font-align	バナーパネル内のテキストに使用するフォントの整列。

バナーのツールチップをローカライズできます。詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。

例

背景色が濃いグレー、2ピクセルの境界線が明るいグレー、水平方向に中央揃えされた白のテキストのバナーを設定するには、次のように記述します。

.s7interactivevideoviewer .s7interactiveswatches .s7banner { 
    background-color: #222222; 
    border-bottom: 2px solid #444444; 
    color: #ffffff; 
    text-align: center; 
}

以下に示すCSSクラスセレクターで、スウォッチの外観を制御します。

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

スウォッチ領域のCSSプロパティ

background-color

スウォッチ領域の背景色。

例

背景色が濃いグレーのスウォッチ領域を設定するには、次の手順に従います。

.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プロパティ

width	サムネールの幅。
height	サムネールの高さ。
枠線	サムネールの境界線。

メモ

サムネールでは、state属性セレクターがサポートされます。このセレクターは、サムネールの状態ごとに異なるスキンを適用するのに使用できます。特に、state="selected"は、現在選択されている画像のサムネールに対応します。state="default"は、その他のサムネールに対応します。state="over"は、マウスカーソルを合わせたときに使用されます。

例

100 x 75ピクセルのサムネールを設定するには：

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

以下に示すCSSクラスセレクターで、サムネールラベルの外観を制御します。

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

サムネールラベルの外観のCSSプロパティ

color	テキストカラー
枠線	ラベルの境界線。
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プロパティ

width	スクロールボタンの幅。
height	スクロールボタンの高さ。
background-image	ボタンの特定の状態に対して表示する画像。
background-position	CSSスプライトを使用する場合の、アートワークスプライト内の位置。 CSSスプライトも参照してください。

メモ

このボタンでは、state属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。" up"、" down"、" over"、" disabled"

ボタンのツールヒントをローカライズできます。詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。

例

60 x 36ピクセルで、状態ごとに異なるアートワークを持ち、コンポーネントのスプライト画像からそのアートワークを取得するスクロールアップボタンを設定するには、次のように記述します。

.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; }