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

Active et désactive l’affichage du sous-titre. Elle 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 principale de la visionneuse

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

.s7mixedmediaviewer .s7closedcaptionbutton
Propriété CSS
Description
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.
hauteur
Hauteur du bouton.
image d’arrière-plan
Image affichée pour un état donné du bouton.
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 le sélecteur d’attributs et les state 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 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 : pour configurer un bouton Sous-titrage 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 lorsqu’il est sélectionné 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
b7426f53-aad9-4c00-83fc-664f30f681e8