Bouton PlayPause playpause-button

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

Le bouton est visible uniquement si le paramètre CarouselViewer.autoplay est défini sur 1 ; dans le cas contraire, il est masqué. Vous pouvez dimensionner, appliquer une enveloppe 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 visionneuse principale

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

.s7carouselviewer .s7playpausebutton

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

Par exemple, supposons que vous souhaitiez configurer un bouton de pause de lecture de 28 x 28 pixels. Vous souhaitez que le bouton soit positionné à 17 pixels du bas et à 12 pixels du bord gauche de la visionneuse. De plus, vous souhaitez qu’elle affiche une image différente pour chacun des quatre états de bouton différents, qu’ils soient sélectionnés 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);
}