Définir l'indicateur

L’indicateur défini est une série de points affichés sur les nuances lorsqu’une visionneuse est utilisée sur un périphérique 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 de définition

L’aspect du conteneur d’indicateur de définition est contrôlé par le 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 définir un indicateur avec un arrière-plan blanc :

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

L’aspect d’un point d’indicateur de paramètre individuel est contrôlé par le sélecteur de classe CSS :

.s7zoomviewer .s7setindicator .s7dot

Propriété CSS

Description

width

Largeur du point d’indicateur défini.

height

Hauteur du point indicateur défini.

marge-gauche

Marge gauche en pixels.

margin-top

Marge supérieure en pixels.

marge droite

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

Le paramètre indicateur dot prend en charge le sélecteur d’attributs 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 du point par défaut.

Exemple : pour définir un point indicateur de 15 x 15 pixels, avec une marge horizontale de deux pixels, une marge supérieure de cinq pixels, une marge inférieure de un pixel, un rayon de douze pixels, la couleur par défaut #D5D3D3 et la couleur principale #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;  
}

Sur cette page