Définir l’indicateur set-indicator
Définir l’indicateur est une série de points rendus sur des échantillons lorsqu’une visionneuse est utilisée sur un appareil tactile. Les points aident les utilisateurs à parcourir les pages de miniatures lorsque les boutons de défilement ne sont pas disponibles.
Propriétés CSS de l’indicateur défini
L’aspect du conteneur d’indicateurs définis est contrôlé avec le sélecteur de classe CSS suivant :
.s7zoomviewer .s7setindicator
Exemple - Pour créer un indicateur défini avec un arrière-plan blanc :
.s7zoomviewer .s7setindicator {
background-color: #FFFFFF;
}
L’aspect d’un point d’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 de miniatures en cours, 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, une couleur par défaut #D5D3D3 et #939393 couleur active :
.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;
}