DocumentationGuide de référence des visionneuses Dynamic Media

Bouton Légende caption-button

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Développeur
  • Utilisateur ou utilisatrice

Active et désactive l’affichage de la légende fermée. 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 de visionneuse principale

L’aspect du bouton est contrôlé à l’aide du 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, y compris la marge intérieure.
left
Position depuis la bordure gauche, y compris la marge intérieure.
bottom
Position à partir de la bordure inférieure, y compris la marge intérieure.
width
Largeur du bouton.
height
Hauteur du bouton.
background-image
Image affichée pour un état de bouton donné.
background-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir Sprites 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 de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer un bouton Sous-titrage codé de 28 x 28 pixels, positionnez quatre pixels à partir du haut et 68 pixels à partir 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