Indicateur de définition set-indicator

L’indicateur de définition est une série de points affichés au-dessus des échantillons lorsqu’une visionneuse est utilisée sur un appareil tactile. Les points aident les utilisateurs à parcourir les pages des miniatures lorsque les boutons de défilement ne sont pas disponibles.

Propriétés CSS de l’indicateur set

L’aspect du conteneur d’indicateur défini est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7zoomviewer .s7setindicator
propriété CSS
Description
arrière-plan-couleur
Couleur d’arrière-plan au format hexadécimal de l’indicateur défini.

Exemple : pour créer un indicateur d'ensemble avec un arrière-plan blanc :

.s7zoomviewer .s7setindicator {
 background-color: #FFFFFF;
}

L’aspect d’un point indicateur de définition individuel est contrôlé à l’aide du sélecteur de classe CSS :

.s7zoomviewer .s7setindicator .s7dot

propriété CSS
Description
width
Largeur du point d’indicateur défini.
height
Hauteur du point d’indicateur défini.
margin-left
Marge gauche en pixels.
margin-top
Marge supérieure en pixels.
margin-right
Marge droite en pixels.
margin-bottom
Marge inférieure en pixels.
border-radius
Rayon de la bordure en pixels.
arrière-plan-couleur
Couleur d’arrière-plan au format hexadécimal.
NOTE
L’option Définir le point d’indicateur prend en charge state sélecteur d’attributs 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 du point par défaut.

Exemple : pour créer un point d’indicateur fixe 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 #939393 couleur principale :

.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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8