Échantillons 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 s’agit d’une bannière dans la partie supérieure qui effectue le rendu du texte tel que "Clic pour affichage", d’une colonne d’un ou plusieurs échantillons interactifs et de deux boutons de défilement (disponibles uniquement sur les systèmes 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 périphériques tactiles orientés 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 des échantillons interactifs :

.s7interactivevideoviewer .s7interactiveswatches

Propriétés CSS des échantillons interactifs css-properties-of-the-interactive-swatches

width
Largeur du panneau des échantillons interactifs
height
Hauteur du panneau des échantillons interactifs.
haut
Position supérieure du panneau des échantillons interactifs.
bas
Position inférieure du panneau des échantillons interactifs.
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 des échantillons interactifs sont définis par une combinaison des propriétés CSS ci-dessus, comme suit :

  • Pour effectuer le rendu des échantillons interactifs horizontalement au bas de la visionneuse, définissez la hauteur sur une valeur de pixel absolue. gauche et bas à 0 px ; largeur, droite et haut vers auto.
  • Pour effectuer le rendu des échantillons interactifs verticalement à droite du contenu vidéo, définissez la largeur sur un pixel absolu. droite et haut à 0 px ; hauteur, gauche et bas à auto.

Il est possible d’utiliser des marqueurs CSS avec ce style pour obtenir le positionnement adaptatif du panneau des échantillons interactifs.

Exemple example

Pour configurer un panneau d’échantillons interactifs afin qu’il s’affiche horizontalement au bas de la visionneuse sur des périphériques 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 de bannière :

.s7interactivevideoviewer .s7interactiveswatches .s7banner

Propriétés CSS du panneau de bannière css-properties-of-the-banner-panel

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-weight
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 de la police à utiliser pour le texte dans le 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 section-e8caea0a303c425a8a637c2a47c06355

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 d’échantillons css-properties-of-the-swatches-area

arrière-plan-couleur
Couleur d’arrière-plan de la zone d’échantillons.

Exemple section-9cadd62a09fd44a280f55ff42437e416

Pour configurer une zone d’échantillon 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’interlettrage des miniatures des échantillons css-properties-of-the-swatches-thumbnail-spacing

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 section-39fb270b7e494a9d99e6e8f6890ec53c

Pour configurer l’espacement vertical à dix pixels :

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

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

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

Propriétés CSS de l’aspect des miniatures individuelles css-properties-of-the-appearance-of-individual-thumbnails

width
Largeur de la miniature.
height
Hauteur de la miniature.
bordure
Bordure de la miniature.
NOTE
La miniature prend en charge le sélecteur d’attributs 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é au survol de 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

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

Exemple section-eb141eb6c1154183baa69796edb90536

Pour configurer des libellés de 12 pixels alignés à gauche, en blanc, 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 haut et 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 de la visionneuse les positionne automatiquement.

Propriétés CSS de l’aspect des boutons de défilement haut et bas css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons

width
Largeur du bouton de défilement.
height
Hauteur du bouton de défilement.
background-image
Image affichée pour un état de bouton donné.
arrière-plan-position

Position à l’intérieur du sprite d’illustration, si des sprites CSS sont utilisés.

Voir aussi CSS Sprites.

NOTE
Ce bouton prend en charge le sélecteur d’attributs 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 de 60 x 36 pixels, disposez d’une illustration différente pour chaque état et extrait 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; }
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8