Définir l’indicateur set-indicator
L’indicateur défini est une série de points rendus au-dessus des échantillons lorsqu’une visionneuse est utilisée sur un appareil tactile. Les points aident les utilisateurs à naviguer dans les pages de vignettes lorsque les boutons de défilement ne sont pas disponibles.
Propriétés CSS de l’indicateur défini
L’aspect du conteneur indicateur défini est contrôlé par le sélecteur de classe CSS suivant :
.s7zoomviewer .s7setindicator
Exemple - Pour créer un indicateur défini sur fond blanc :
.s7zoomviewer .s7setindicator {
background-color: #FFFFFF;
}
L’aspect d’un point indicateur défini individuel est contrôlé par le sélecteur de classe CSS :
.s7zoomviewer .s7setindicator .s7dot
state , qui peut être utilisé pour appliquer différents habillages à différents états de miniature. En particulier, state="selected" correspond à la page actuelle des miniatures, state="unselected" correspond à l’état de point par défaut.Exemple - Pour créer un point indicateur défini de 15 x 15 pixels, avec une marge horizontale de 2 pixels, une marge supérieure de 5 pixels, une marge inférieure de 1 pixel, un rayon de 12 pixels #D5D3D3 couleur par défaut et une couleur active #939393 :
.s7zoomviewer .s7setindicator .s7dot {
width:15px;
height:15px;
margin-left:2px;
margin-top:5px;
margin-right:2px;
margin-bottom:1px;
border-radius:12px;
background-color:#D5D3D3;
}
.s7zoomviewer .s7setindicator .s7dot[state="selected"] {
background-color:#939393;
}