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 configurer un indicateur 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

Le point d’indicateur fixe 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 configurer un point d’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 pixel, un rayon de douze 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