Bouton PlayPause

Le bouton Lecture/Pause permet à un utilisateur de suspendre ou de reprendre le comportement de lecture automatique du carrousel.

Le bouton n'est visible que si le paramètre CarouselViewer.autoplay est défini sur 1; sinon, il est caché. Vous pouvez dimensionner, habiller et positionner ce bouton, par rapport à la barre de contrôle qui le contient, à l’aide de CSS.

Propriétés CSS de la zone de visualisation principale

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

.s7carouselviewer .s7playpausebutton

Propriété CSS

Description

haut

Position à partir du haut de la bordure de la visionneuse.

droite

Position à droite de la bordure de la visionneuse.

gauche

Position à gauche du lecteur de contenu.

bas

Position à partir du bas de la bordure de la visionneuse.

width

Largeur du bouton.

height

Hauteur du 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 aussi sprites CSS .

curseur

Type de curseur.

REMARQUE

Ce bouton prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer un bouton de lecture en pause de 28 x 28 pixels, positionné à 17 pixels du bas et à 12 pixels du bord gauche de la visionneuse, et qui affiche une image différente pour chacun des quatre états de bouton différents lorsqu’il est sélectionné ou non.

.s7carouselviewer .s7playpausebutton { 
bottom:17px; 
left:12px; 
width:28px; 
height:28px; 
} 
.s7carouselviewer .s7playpausebutton[selected='true'][state='up'] { 
  background-image:url(images/playBtn_up.png); 
} 
.s7carouselviewer .s7playpausebutton[selected='true'][state='over'] {  
background-image:url(images/playBtn_over.png); 
} 
.s7carouselviewer .s7playpausebutton[selected='true'][state='down'] {  
background-image:url(images/playBtn_down.png); 
} 
.s7carouselviewer .s7playpausebutton[selected='true'][state='disabled'] { 
background-image:url(images/playBtn_disabled.png); 
} 
.s7carouselviewer .s7playpausebutton[selected='false'][state='up'] {  
background-image:url(images/pauseBtn_up.png); 
} 
.s7carouselviewer .s7playpausebutton[selected='false'][state='over'] {  
background-image:url(images/pauseBtn_over.png); 
} 
.s7carouselviewer .s7playpausebutton[selected='false'][state='down'] {  
background-image:url(images/pauseBtn_down.png); 
}

Sur cette page