Interaktive Muster

Das Bedienfeld für interaktive Muster wird neben dem Videoinhalt angezeigt, wenn interaktive Daten in der Konfiguration an den Viewer weitergeleitet wurden. Es besteht aus einem Banner am oberen Rand, mit dem Text wie "Zur Ansicht klicken", einer oder mehreren interaktiven Farbfeldern und zwei Bildlaufschaltflächen (nur auf Desktop-Systemen verfügbar) gerendert werden.

Auf Desktop-Systemen und Touch-Geräten werden interaktive Muster im Querformat vertikal rechts neben dem Videoinhalt gerendert. Auf Touch-Geräten im Hochformat werden sie am unteren Rand des Viewers als horizontale Zeile mit Farbfeldern angezeigt.

Der folgende CSS-Klassenselektor steuert die Position und Ausrichtung des interaktiven Farbfelderbedienfelds:

.s7interactivevideoviewer .s7interactiveswatches

CSS-Eigenschaften der interaktiven Muster

Die Laufzeitposition und Ausrichtung des interaktiven Farbfelderbedienfelds 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. links und unten bis 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. rechts und oben bis 0px; Höhe, links und unten nach Auto.

Es ist möglich, CSS-Markierungen in Verbindung mit dieser Formatierung zu verwenden, um eine adaptive Platzierung des interaktiven Farbfelderbedienfelds zu erreichen.

Beispiel

So richten Sie ein interaktives Farbfeldbedienfeld ein, das am unteren Rand des Viewers auf Touch-Geräten im Querformat horizontal dargestellt und in allen anderen Fällen vertikal rechts neben dem Videoinhalt angezeigt wird:

.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 Komponente für interaktive Muster verwaltet, die auf anderen Stilen basiert, die mit CSS angewendet werden, und können nicht explizit festgelegt werden.

Die folgende CSS-Klassenauswahl steuert das Erscheinungsbild des Bannerbedienfelds:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

CSS-Eigenschaften des Bannerbedienfelds

Die QuickInfo für Banner kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel

Um ein Banner mit dunkelgrauem Hintergrund einzurichten, heller grauer Rand mit zwei Pixeln und weißer Text horizontal zentriert:

.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 den Musterminiaturen:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

CSS-Eigenschaften der Farbfelder-Miniaturabstände

Beispiel

So legen Sie einen vertikalen Abstand von 10 Pixel fest:

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

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der einzelnen Miniaturansichten:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

CSS-Eigenschaften des Erscheinungsbilds einzelner Miniaturansichten

Beispiel

So richten Sie Miniaturansichten mit 100 x 75 Pixeln 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 Miniaturansichten-Beschriftung

Beispiel

So richten Sie Beschriftungen so ein, dass sie linksbündig, weiß, 12 Pixel in Helvetica-Schrift und einen unteren Rand verwenden:

.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 Schaltflächen für den Bildlauf nach oben und nach unten:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

Die Bildlaufschaltflächen können nicht mit den Eigenschaften CSS top, left, bottom und right positioniert werden. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

CSS-Eigenschaften des Erscheinungsbilds der Schaltflächen für den Bildlauf nach oben und unten

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel

Um eine Bildlaufschaltfläche von 60 x 36 Pixeln einzurichten, müssen Sie für jeden Status ein anderes Bildmaterial verwenden, das aus dem Sprite-Bild der Komponente stammt:

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