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

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

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

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

.s7interactivevideoviewer .s7interactiveswatches

インタラクティブスウォッチのCSSプロパティ css-properties-of-the-interactive-swatches

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

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

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

このスタイルでCSSマーカーを使用して、インタラクティブスウォッチパネルを適切に配置できます。

example

タッチデバイスで横向きに水平方向にレンダリングするインタラクティブスウォッチパネルを設定するには、次のように記述します。 また、その他の場合は、ビデオコンテンツの右側に垂直に表示するには、次の手順を実行します。

.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プロパティ css-properties-of-the-banner-panel

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

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

section-e8caea0a303c425a8a637c2a47c06355

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

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

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

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

スウォッチ領域のCSSプロパティ css-properties-of-the-swatches-area

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

section-9cadd62a09fd44a280f55ff42437e416

濃いグレーの背景を持つスウォッチ領域を設定するには:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
    background-color: #222222;
}

以下に示すCSSクラスセレクターで、スウォッチサムネールの間隔を制御します。

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

スウォッチのサムネールの間隔のCSSプロパティ css-properties-of-the-swatches-thumbnail-spacing

margin
各サムネールの周囲の水平および垂直のマージンのサイズ。 実際のサムネールの間隔は、 .s7thumbcell に設定された左右のマージンの合計になります。

section-39fb270b7e494a9d99e6e8f6890ec53c

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

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

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

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

個々のサムネールの外観のCSSプロパティ css-properties-of-the-appearance-of-individual-thumbnails

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

section-69fec189ffaa440b97b6b846c320b75b

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

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

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

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

サムネールラベルの外観のCSSプロパティ css-properties-of-the-appearance-of-the-thumbnail-label

color
テキストカラー
枠線
ラベルの境界線
text-align
テキストの水平方向の整列。
font-family
フォント名

section-eb141eb6c1154183baa69796edb90536

左揃え、白、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のtopleftbottomおよびrightプロパティを使用してスクロールボタンを配置することはできません。ビューアのロジックによって自動的に配置が決まります。

上下のスクロールボタンの外観のCSSプロパティ css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons

width
スクロールボタンの幅。
height
スクロールボタンの高さ。
background-image
ボタンの特定の状態に対して表示される画像。
background-position

CSSスプライトを使用する場合の、アートワークのスプライト内の位置。

CSSスプライトも参照してください。

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

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

section-e6ce4fa084b84288bc7583342b2c510c

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; }
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8