DocumentationGuide de référence des visionneuses Dynamic Media

Bouton Légende caption-button

Last update: Fri Aug 15 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Développeur
  • Utilisateur ou utilisatrice

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

Vous pouvez dimensionner, habiller 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 :

.s7interactivevideoviewer .s7closedcaptionbutton

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

Retour au début
Position à partir de la bordure supérieure, y compris le rembourrage.
Droite
Position à partir de la bordure droite, y compris le rembourrage.
Gauche
Position à partir de la bordure gauche, remplissage compris.
fond
Position à partir de la bordure inférieure, remplissage compris.
Largeur
Largeur du bouton plein écran.
hauteur
Hauteur du bouton plein écran.
image d’arrière-plan
L’image affichée pour un état de bouton donné.
position de l’arrière-plan

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

Voir SpritesCSS.

NOTE
Ce bouton prend en charge à la fois 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 dans lequel les légendes sont visibles et selected='false' est utilisé lorsque les légendes sont masquées.

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

Exemple section-e8caea0a303c425a8a637c2a47c06355

Pour définir un bouton de sous-titrage de 28 x 28 pixels. Le bouton doit être positionné à quatre pixels du haut et à 68 pixels du bord droit de la barre de contrôle. Et, il doit afficher une image différente pour chacun des quatre états de bouton différents lorsqu’il est sélectionné ou non.

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