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

width

Breite des Bedienfelds für interaktive Muster

height

Höhe des interaktiven Farbfelderbedienfelds.

Anfang

Position des Bedienfelds für interaktive Muster am Anfang.

unten

Unterste Position des interaktiven Farbfelderbedienfelds.

links

Linke Position des interaktiven Farbfelderbedienfelds.

rechts

Die rechte Position des interaktiven Farbfelderbedienfelds.

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

background-color

Hintergrundfarbe des Bannerbedienfelds.

color

Textfarbe im Bannerbedienfeld.

rand

Rand um das Bannerbedienfeld herum.

font-Gewichtung

Die Schriftart-Gewichtung, die für den Text im Bannerbedienfeld verwendet wird.

font-size

Die Schriftgröße, die für den Text im Bannerbedienfeld verwendet wird.

font-family

Die Schriftfamilie, die für den Text im Bannerbedienfeld verwendet wird.

font-align

Die Schriftausrichtung für den Text im Bannerbedienfeld.

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

background-color

Hintergrundfarbe 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

margin

Die Größe des horizontalen und vertikalen Randes um die einzelnen Miniaturansichten. Der tatsächliche Abstand zwischen den Miniaturansichten entspricht der Summe des linken und rechten Randes, der für .s7thumbcell festgelegt wurde.

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

width

Breite der Miniaturansicht.

height

Höhe der Miniaturansicht.

rand

Rand der Miniaturansicht.

HINWEIS

Miniaturansicht unterstützt die Attributauswahl state, mit der Sie verschiedene Skins auf verschiedene Miniaturansichten anwenden können. Insbesondere entspricht state="selected" der Miniaturansicht des aktuell ausgewählten Bildes. state="default" entspricht dem Rest der Miniaturansichten; state="over" wird beim Bewegen der Maus verwendet.

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

color

Textfarbe.

rand

Beschriftungsrand.

text-align

Horizontale Textausrichtung.

font-family

Schriftname.

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

width

Breite der Bildlaufschaltfläche.

height

Höhe der Bildlauftaste.

background-image

Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.

background-position

Die Position innerhalb des Grafik-Sprites, wenn CSS-Sprites verwendet werden.

Siehe auch CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der Sie verschiedene Skins auf die Schaltflächenzustände anwenden können: " up", " down", " over"und " disabled".

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

Auf dieser Seite