Bouton Légende

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 :

.s7smartcropvideoviewer .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 Sprites CSS .

REMARQUE

Ce bouton prend en charge les deux state et selected sélecteurs d’attributs, 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 des 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 de sous-titrage codé de 28 x 28 pixels. Il est 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.

.s7smartcropvideoviewer .s7closedcaptionbutton {
 position:absolute;
 top:4px;
 right:68px;
 width:28px;
 height:28px;
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_up.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}

Sur cette page