DocumentationGuide de référence des visionneuses Dynamic Media

Bouton Légende caption-button

Last update: Thu Mar 19 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Développeur
  • Utilisateur ou utilisatrice

Ce bouton active/désactive l’affichage des sous-titres. Il n’est pas visible si le paramètre de légende n’est pas spécifié.

Vous pouvez dimensionner, appliquer une enveloppe et positionner ce bouton par rapport à la barre de contrôle qui le contient, à l’aide de CSS.

L’aspect de ce bouton est contrôlé par le sélecteur de classe CSS suivant :

.s7smartcropvideoviewer .s7closedcaptionbutton

Propriétés CSS du bouton de légende

top
Position à partir de la bordure supérieure, y compris la marge intérieure.
droit
Position à partir de la bordure droite, marge intérieure incluse.
gauche
Position à partir de la bordure gauche, marge intérieure incluse.
inférieur
Position à partir de la bordure inférieure, y compris la marge intérieure.
largeur
Largeur du bouton Plein écran.
de hauteur
Hauteur du bouton Plein écran.
le image d’arrière-plan
Image affichée pour un état de bouton donné.
la position de l’arrière-plan

Positionnez à l’intérieur d’un sprite d’illustration si des sprites CSS sont utilisés.

Voir desSprites CSS.

NOTE
Ce bouton prend en charge les sélecteurs d'attributs state et selected, qui peuvent être utilisés pour appliquer différents habillages à différents états de bouton. En particulier, selected='true' correspond à l’état lorsque les sous-titres sont visibles et selected='false' est utilisé lorsque les sous-titres sont masqués.

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

Exemple section-e8caea0a303c425a8a637c2a47c06355

Pour configurer un bouton de légende de 28 x 28 pixels. Il est positionné à quatre pixels du haut et à 68 pixels du bord droit de la barre de contrôle. Enfin, affiche une image différente pour chacun des quatre états de bouton différents, qu’ils soient sélectionnés ou non.

.s7smartcropvideoviewer .s7closedcaptionbutton {
 position:absolute;
 top:4px;
 right:68px;
 width:28px;
 height:28px;
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_up.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8