Ce bouton active et désactive l’affichage des sous-titres fermés. 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 d’une feuille CSS.
L’aspect de ce bouton est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7interactivevideoviewer .s7closedcaptionbutton
Propriétés CSS du bouton de légende
haut |
Position à partir de la bordure supérieure, y compris la marge intérieure. |
droite |
Position à partir de la bordure droite, y compris la marge intérieure. |
gauche |
Position à partir de la bordure gauche, y compris la marge intérieure. |
bas |
Position à partir de la bordure inférieure, y compris la marge intérieure. |
width |
Largeur du bouton plein écran. |
height |
Hauteur du bouton plein écran. |
background-image |
L’image affichée pour un état de bouton donné. |
arrière-plan-position |
Position dans l’objet d’illustration, si des sprites CSS sont utilisés. Voir CSS Sprites . |
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 de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Pour configurer un bouton de sous-titrage codé 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. Il doit également 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);
}