DocumentationAEMGuide de référence des visionneuses Dynamic Media

Bouton Légende caption-button

Dernière mise à jour : 15 août 2025
  • Rubriques :
  • API

Créé pour :

  • Expérimenté
  • Utilisateur/utilisatrice
  • Développeur

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 utiliser CSS pour dimensionner, habiller et positionner ce bouton par rapport à la barre de contrôle qui le contient.

Propriétés CSS de la zone de visionneuse principale

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

.s7mixedmediaviewer .s7closedcaptionbutton
Propriété CSS
Description
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.
de hauteur
Hauteur du bouton.
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 le sélecteur d'attributs state et les sélecteurs d'attributs sélectionnés, 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 - Pour configurer un bouton de sous-titrage codé de 28 x 28 pixels, 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.

.s7mixedmediaviewer .s7closedcaptionbutton {
 position:absolute;
 top:4px;
 right:68px;
 width:28px;
 height:28px;
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_up.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref