Nuanciers interactifs interactive-swatches
Le panneau d’échantillons interactifs s’affiche en regard du contenu vidéo si des données interactives ont été transmises à la visionneuse dans la configuration . Il se compose d’une bannière en haut qui affiche du texte tel que « Cliquez pour afficher », d’une colonne d’un ou de plusieurs échantillons interactifs et de deux boutons de défilement (disponibles uniquement sur les ordinateurs de bureau).
Sur les ordinateurs de bureau et les appareils tactiles, en orientation paysage, les échantillons interactifs sont rendus verticalement à droite du contenu vidéo. Sur les appareils tactiles en orientation portrait, ils apparaissent au bas de la visionneuse, sous la forme d’une ligne horizontale d’échantillons.
Le sélecteur de classe CSS suivant contrôle l’emplacement et l’orientation du panneau d’échantillons interactifs :
.s7interactivevideoviewer .s7interactiveswatches
Propriétés CSS des échantillons interactifs css-properties-of-the-interactive-swatches
L’emplacement et l’orientation au moment de l’exécution du panneau d’échantillons interactifs sont définis par une combinaison des propriétés CSS ci-dessus comme suit :
- Pour effectuer le rendu d’échantillons interactifs horizontalement au bas de la visionneuse, définissez la hauteur sur une valeur absolue en pixels ; la gauche et le bas sur 0px ; la largeur, la droite et le haut sur auto.
- Pour effectuer le rendu d’échantillons interactifs verticalement à droite du contenu vidéo, définissez la largeur sur un pixel absolu, à droite et en haut sur 0px, et la hauteur, à gauche et en bas sur auto.
Il est possible d’utiliser des marqueurs CSS avec ce style pour réaliser le placement adaptatif du panneau d’échantillons interactifs.
Exemple example
Pour configurer un panneau d’échantillons interactifs afin qu’il effectue le rendu horizontal au bas de la visionneuse sur les appareils tactiles en orientation paysage. Et pour l’afficher 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 d’échantillons interactifs 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 Bannière :
.s7interactivevideoviewer .s7interactiveswatches .s7banner
Propriétés CSS du panneau Bannière css-properties-of-the-banner-panel
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 section-e8caea0a303c425a8a637c2a47c06355
Pour configurer une bannière avec un arrière-plan gris foncé, une bordure de deux pixels gris clair et le 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 d’échantillons css-properties-of-the-swatches-area
Exemple section-9cadd62a09fd44a280f55ff42437e416
Pour configurer la zone d’échantillons 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’échantillon :
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell
Propriétés CSS de l’espacement des miniatures des échantillons css-properties-of-the-swatches-thumbnail-spacing
Exemple section-39fb270b7e494a9d99e6e8f6890ec53c
Pour définir un espacement vertical de dix 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 css-properties-of-the-appearance-of-individual-thumbnails
state, que vous pouvez utiliser pour appliquer différents habillages à différents états de miniature. En particulier, state="selected" correspond à la miniature de l’image actuellement sélectionnée ; state="default" correspond au reste des miniatures ; state="over" est utilisé lorsque vous pointez dessus avec la souris.Exemple section-69fec189ffaa440b97b6b846c320b75b
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 css-properties-of-the-appearance-of-the-thumbnail-label
Exemple section-eb141eb6c1154183baa69796edb90536
Pour configurer les libellés afin qu’ils utilisent des lignes blanches alignées à gauche, 12 pixels, dans la police Helvetica® et 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 ; à la place, la logique de la visionneuse les positionne automatiquement.
Propriétés CSS de l’aspect des boutons de défilement vers le haut et vers le bas css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons
state, que vous pouvez utiliser pour appliquer différents habillages aux états du bouton : « up », « down », « over » et « disabled ».Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Exemple section-e6ce4fa084b84288bc7583342b2c510c
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 extrayez cette illustration de l’image sprite 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; }