Indicateur de définition

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.

REMARQUE

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;
}

Sur cette page