Les échantillons sont constitués d’une rangée d’images miniatures avec des boutons de défilement facultatifs à gauche et à droite. Les boutons de défilement ne sont visibles sur le bureau que si toutes les miniatures ne peuvent pas tenir dans la largeur du conteneur. Sur les périphériques mobiles ou si les miniatures peuvent s’ajuster à la largeur du conteneur, les boutons de défilement ne s’affichent pas.
.s7zoomviewer .s7swatches
Propriétés CSS de la zone de visualisation principale
L’aspect du conteneur des échantillons est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7zoomviewer .s7zoomresetbutton
Propriété CSS |
Description |
---|---|
width |
Largeur des nuances. |
height |
Hauteur des nuances. |
bas |
Décalage des nuances verticales par rapport au conteneur de la visionneuse. |
Exemple : pour configurer des nuances à 460 x 100 pixels.
.s7zoomviewer .s7swatches {
width: 460px;
height: 100px;
}
L’espacement entre les miniatures d’échantillon est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7zoomviewer .s7swatches .s7thumbcell
Propriété CSS |
Description |
---|---|
margin |
Taille de la marge horizontale et verticale autour de chaque miniature. L’espacement réel des miniatures est égal à la somme des marges gauche et droite définies pour .s7thumbcell . |
Exemple
Pour définir l’espacement sur dix pixels, tant verticalement qu’horizontalement.
.s7zoomviewer .s7swatches .s7thumbcell {
margin: 5px;
}
L’aspect de la miniature individuelle est contrôlé par le sélecteur de classe CSS suivant :
.s7zoomviewer .s7swatches .s7thumb
Propriété CSS |
Description |
---|---|
width |
Largeur de la miniature. |
hauteur |
Hauteur de la miniature. |
bordure |
Bordure de la miniature. |
La miniature 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 miniature de l’image actuellement affichée dans la vue principale, state="default"
correspond au reste des miniatures et state="over"
est utilisé lorsque vous pointez la souris.
Exemple : pour configurer des miniatures de 56 x 56 pixels, utilisez une bordure par défaut gris clair et une bordure sélectionnée gris foncé.
.s7zoomviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7zoomviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
L’aspect des boutons de défilement gauche et droit est contrôlé par les sélecteurs de classe CSS suivants :
.s7zoomviewer .s7swatches .s7scrollleftbutton
.s7zoomviewer .s7swatches .s7scrollrightbutton
Il n’est pas possible de positionner les boutons de défilement à l’aide des propriétés CSS top, left, bottom et right. Au lieu de cela, la logique du lecteur les positionne automatiquement.
Propriété CSS |
Description |
---|---|
width |
Largeur du bouton de défilement. |
hauteur |
Hauteur du bouton de défilement. |
image d’arrière-plan |
Image affichée pour un état de bouton donné. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir CSS Sprites . |
Ce bouton prend en charge le sélecteur d’attributs state
, qui peut être utilisé pour appliquer différents habillages à différents états de bouton : up
, down
, over
et disabled
.
Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur.
Exemple : pour configurer des boutons de défilement de 56 x 56 pixels et présentant des illustrations différentes pour chaque état.
.s7zoomviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}