Interaktive Muster

Das interaktive Bedienfeld "Muster"wird neben dem Videoinhalt angezeigt, wenn interaktive Daten in der Konfiguration an den Viewer übergeben wurden. Es besteht aus einem Banner oben, das Text wie "Click to View", eine Spalte mit mindestens einem interaktiven Farbfeld und zwei Bildlauftasten (nur auf Desktop-Systemen verfügbar) rendert.

Auf Desktop-Systemen und Touch-Geräten werden interaktive Muster im Querformat vertikal rechts neben dem Videoinhalt gerendert. Auf Touch-Geräten mit Hochformatausrichtung werden sie unten im Viewer als horizontale Zeile mit Farbfeldern angezeigt.

Der folgende CSS-Klassenselektor steuert die Position und Ausrichtung des interaktiven Bedienfelds "Muster":

.s7interactivevideoviewer .s7interactiveswatches

CSS-Eigenschaften der interaktiven Muster

Die Laufzeitposition und -ausrichtung des interaktiven Bedienfelds wird durch eine Kombination der oben genannten CSS-Eigenschaften wie folgt definiert:

• Um interaktive Muster horizontal am unteren Rand des Viewers zu rendern, legen Sie die Höhe auf einen absoluten Pixelwert fest. von links und von unten nach 0px; width, right und top to auto.
• Um interaktive Muster vertikal rechts neben dem Videoinhalt zu rendern, legen Sie die Breite auf ein absolutes Pixel fest. von rechts und von oben bis 0px; Höhe, links und unten bis Auto.

Es ist möglich, CSS-Markierungen mit diesem Stil zu verwenden, um eine adaptive Platzierung des interaktiven Bedienfelds "Muster"zu erreichen.

Beispiel

So richten Sie ein interaktives Bedienfeld für Muster ein, das am unteren Rand des Viewers auf Touch-Geräten horizontal im Querformat dargestellt wird. Und um ihn in allen anderen Fällen vertikal rechts neben dem Videoinhalt anzuzeigen:

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

Größe und Position des Banners werden von der interaktiven Farbfeldkomponente verwaltet, die auf anderen Stilen basiert, die mit CSS angewendet werden, und können nicht explizit festgelegt werden.

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild des Bannerbereichs:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

CSS-Eigenschaften des Bannerbedienfelds

Die Banner-QuickInfo kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

Beispiel

Um ein Banner mit dunkelgrauem Hintergrund einzurichten, verwenden Sie einen helleren, zwei Pixel langen Rahmen und den horizontal zentrierten weißen Text:

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

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Muster:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

CSS-Eigenschaften des Farbfeldbereichs

Beispiel

So richten Sie einen Farbfeldbereich mit dunkelgrauem Hintergrund ein:

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

Der folgende CSS-Klassenselektor steuert den Abstand zwischen Musterminiaturansichten:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

CSS-Eigenschaften des Farbfeldminiaturenabstands

Beispiel

So legen Sie einen vertikalen Abstand von zehn Pixel fest:

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

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild einzelner Miniaturansichten:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

CSS-Eigenschaften des Erscheinungsbilds einzelner Miniaturansichten

Beispiel

So richten Sie Miniaturansichten mit einer Größe von 100 x 75 Pixel ein:

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

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Miniaturansichtsbeschriftung:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

CSS-Eigenschaften des Erscheinungsbilds der Bezeichnung der Miniaturansicht

Beispiel

So richten Sie Beschriftungen für linksbündig, weiß, 12 Pixel in der Helvetica®-Schriftart und einen unteren Rand ein:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label { 
 border-bottom: 1px solid #e9e9e9; 
 text-align: left; 
color: #ffffff; 
font-family: Helvetica,sans-serif; 
font-size: 12px; 
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Bildlaufschaltflächen nach oben und unten:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

Es ist nicht möglich, die Bildlauftasten mithilfe der CSS-Eigenschaften top, left, bottom und right zu positionieren. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

CSS-Eigenschaften des Erscheinungsbilds der Bildlaufschaltflächen nach oben und unten

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

Beispiel

Um eine Bildlaufschaltfläche von 60 x 36 Pixel einzurichten, verwenden Sie für jeden Status ein anderes Bildmaterial und nehmen dieses Bildmaterial aus dem Sprite-Bild der Komponente:

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