La commande de volume mutable s'affiche initialement sous la forme d'un bouton qui permet à l'utilisateur de muter ou de désactiver le son du lecteur vidéo.
Lorsqu'un utilisateur survole le bouton, un curseur s'affiche, permettant à l'utilisateur de définir le volume. La commande de volume modifiable peut être dimensionnée, habillée et positionnée, par rapport à la barre de contrôle qui la contient, par CSS.
L'aspect de la zone de volume modifiable est contrôlé par le sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7mutablevolume
Propriétés CSS du volume modifiable
haut |
Position à partir de la bordure supérieure, y compris le remplissage. |
droite |
Position à partir de la bordure droite, y compris le remplissage. |
width |
Largeur de la commande de volume mutable. |
height |
Hauteur de la commande de volume mutable. |
arrière-plan-couleur |
Couleur de la commande de volume mutable. |
L’aspect du bouton de mise en sourdine est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton
Vous pouvez contrôler l’image d’arrière-plan de chaque état de bouton. La taille du bouton est héritée de la taille du contrôle de volume.
Propriétés CSS de l’image de bouton
image d’arrière-plan |
Image affichée pour un état de bouton donné. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir CSS Sprites . |
Ce bouton prend en charge les sélecteurs d'attribut 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 “muté” et selected='false'
correspond à l’état “non muté”.
La zone de la barre de volume verticale est contrôlée avec le sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume
Propriétés CSS de la zone de la barre de volume verticale
arrière-plan-couleur |
Couleur d’arrière-plan du volume vertical. |
width |
Largeur du volume vertical. |
hauteur |
Hauteur du volume vertical. |
Le suivi à l'intérieur du contrôle de volume vertical est contrôlé avec les sélecteurs de classe CSS suivants :
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
Propriétés CSS du contrôle vertical du volume
arrière-plan-couleur |
Couleur d'arrière-plan de la commande verticale du volume. |
width |
Largeur de la commande verticale du volume. |
hauteur |
Hauteur de la commande verticale du volume. |
Le bouton de volume vertical est contrôlé avec le sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob
Propriétés CSS du bouton vertical de contrôle du volume
image d’arrière-plan |
Illustration du bouton de commande de volume vertical. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir CSS Sprites . |
width |
Largeur du bouton vertical de commande du volume. |
hauteur |
Hauteur du bouton vertical de commande du volume. |
gauche |
Position horizontale du bouton vertical de commande du volume. |
L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Configuration d’un bouton de silence de 32 x 32 pixels et positionné à 6 pixels du haut et à 38 pixels du bord droit de la barre de contrôle. Affichez une image différente pour chacun des quatre états de bouton lorsque vous sélectionnez ou non cette option.
.s7mixedmediaviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
background-image:url(images/unmute_disabled.png);
}
Voici un exemple de la façon dont vous pouvez mettre en forme le curseur de volume dans la commande de volume mutable.
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}