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

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

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

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

.s7interactivevideoviewer .s7interactiveswatches

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

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

• インタラクティブスウォッチをビューアの下部に水平方向にレンダリングするには、高さをピクセル絶対値に設定します。leftとbottomから0pxに変換。幅、右、上から自動
• インタラクティブスウォッチをビデオコンテンツの右側に垂直にレンダリングするには、幅を絶対ピクセルに設定します。rightとtopから0pxに変換します。height、leftおよびbottomを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

バナーパネルのCSSプロパティ

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

例

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

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

例

垂直方向の間隔を10ピクセルに設定するには：

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

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

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

個々のサムネールの外観のCSSプロパティ

例

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

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

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

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

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

例

左揃え、白、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プロパティ

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

例

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