Nuances interactives

Le panneau Nuanciers interactifs s’affiche en regard du contenu vidéo si des données interactives ont été transmises à la visionneuse en configuration. Il se compose d’une bannière en haut de laquelle est affiché le texte tel que "Cliquer pour la Vue", d’une colonne d’une ou de plusieurs nuances interactives et de deux boutons de défilement (disponibles uniquement sur les systèmes de bureau).

Sur les ordinateurs de bureau et sur les périphériques tactiles, en orientation paysage, les échantillons interactifs sont rendus verticalement à droite du contenu vidéo. Sur les périphériques tactiles en orientation portrait, ils apparaissent au bas de la visionneuse, sous la forme d’une rangée horizontale de nuances.

Le sélecteur de classe CSS suivant contrôle l’emplacement et l’orientation du panneau des nuances interactives :

.s7interactivevideoviewer .s7interactiveswatches

Propriétés CSS des échantillons interactifs

width	Largeur du panneau Nuancier interactif
height	Hauteur du panneau des nuances interactives.
haut	Position supérieure du panneau des échantillons interactifs.
bas	Position inférieure du panneau des nuances interactives.
gauche	Position gauche du panneau des échantillons interactifs.
droite	Position droite du panneau des échantillons interactifs.

L’emplacement et l’orientation d’exécution du panneau nuanciers interactifs sont définis par une combinaison des propriétés CSS ci-dessus, comme suit :

• Pour afficher horizontalement des nuances interactives au bas de la visionneuse, définissez la hauteur sur une valeur de pixel absolue ; gauche et bas à 0 px ; largeur, droite et de haut en auto.
• Pour rendre les échantillons interactifs verticalement à droite du contenu vidéo, définissez la largeur sur un pixel absolu. droite et haut à 0px ; hauteur, gauche et bas jusqu’à auto.

Il est possible d’utiliser des marqueurs CSS conjointement avec cette mise en forme pour obtenir le positionnement adaptatif du panneau des nuanciers interactifs.

Exemple

Pour configurer un panneau de nuances interactif afin qu’il s’affiche horizontalement en bas de la visionneuse sur des périphériques tactiles en orientation paysage et verticalement à droite du contenu vidéo dans tous les autres cas :

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

La taille et la position de la bannière sont gérées par le composant de nuances interactives en fonction d’autres styles appliqués avec CSS et ne peuvent pas être définis explicitement.

Le sélecteur de classe CSS suivant contrôle l’aspect du panneau de bannière :

.s7interactivevideoviewer .s7interactiveswatches .s7banner

Propriétés CSS du panneau de bannière

arrière-plan-couleur	Couleur d’arrière-plan du panneau de bannière.
color	Couleur du texte dans le panneau de bannière.
bordure	Bordure autour du panneau de bannière.
font-poids	Poids de police à utiliser pour le texte dans le panneau de bannière.
font-size	Taille de police à utiliser pour le texte dans le panneau de bannière.
font-family	Famille de polices à utiliser pour le texte dans le panneau de bannière.
font-align	Alignement des polices à utiliser pour le texte à l’intérieur du panneau de bannière.

L’info-bulle de la bannière peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple

Pour configurer une bannière avec un arrière-plan gris foncé, une bordure de deux pixels plus claire et un texte blanc centré horizontalement :

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

Le sélecteur de classe CSS suivant contrôle l’aspect des échantillons :

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

Propriétés CSS de la zone de nuances

arrière-plan-couleur

Couleur d’arrière-plan de la zone des nuances.

Exemple

Pour configurer une zone de nuances avec un arrière-plan gris foncé :

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

Le sélecteur de classe CSS suivant contrôle l’espacement entre les miniatures d’échantillons :

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

Propriétés CSS des nuances Espacement des miniatures

margin

Taille de la marge horizontale et verticale autour de chaque miniature. L’espacement réel des miniatures est égal à la somme des marges gauche et droite définies pour .s7thumbcell .

Exemple

Pour définir un espacement vertical de 10 pixels :

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

Le sélecteur de classe CSS suivant contrôle l’aspect des miniatures individuelles :

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

Propriétés CSS de l’aspect des miniatures individuelles

width	Largeur de la miniature.
hauteur	Hauteur de la miniature.
bordure	Bordure de la miniature.

Exemple

Pour configurer des miniatures de 100 x 75 pixels :

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

Le sélecteur de classe CSS suivant contrôle l’aspect du libellé de la miniature :

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

Propriétés CSS de l’aspect du libellé de la miniature

color	Couleur du texte.
bordure	Bordure d’étiquette.
alignement de texte	Alignement horizontal du texte.
font-family	Nom de la police.

Exemple

Pour configurer des libellés à l’aide de caractères alignés à gauche, blancs, de 12 pixels, dans la police Helvetica et d’une bordure inférieure :

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

Le sélecteur de classe CSS suivant contrôle l’aspect des boutons de défilement vers le haut et vers le bas :

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

Il n’est pas possible de positionner les boutons de défilement à l’aide des propriétés CSS top, left, bottom et right; au lieu de cela, la logique du lecteur les positionne automatiquement.

Propriétés CSS de l’aspect des boutons de défilement vers le haut et vers le bas

width	Largeur du bouton de défilement.
hauteur	Hauteur du bouton de défilement.
image d’arrière-plan	Image affichée pour un état de bouton donné.
arrière-plan-position	Position à l’intérieur de l’image-objet, si des images-objets CSS sont utilisées. Voir aussi CSS Sprites .

Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple

Pour configurer un bouton de défilement vers le haut de 60 x 36 pixels, disposez d’une illustration différente pour chaque état et extrait cette illustration de l’image d’image-objet du composant :

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