Bouton Réinitialiser le zoom
Créé pour :
- Développeur
- Utilisateur ou utilisatrice
Si vous sélectionnez ce bouton, une image est réinitialisée dans la vue principale. Vous pouvez dimensionner, habiller et positionner ce bouton à l’aide de CSS.
Propriétés CSS de la zone de visionneuse principale
L’aspect du bouton est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7basiczoomviewer .s7zoomresetbutton
propriété CSS | Description |
---|---|
top | Position à partir de la bordure supérieure, y compris la marge intérieure. |
droit | Position à partir de la bordure droite, y compris la marge intérieure. |
left | Position depuis la bordure gauche, y compris la marge intérieure. |
bottom | Position à partir de la bordure inférieure, y compris la marge intérieure. |
width | Largeur du bouton. |
height | Hauteur du bouton. |
background-image | Image affichée pour un état de bouton donné. |
background-position |
Position dans l’objet d’illustration, si des sprites CSS sont utilisés. Voir Sprites CSS. |
state
, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.L’info-bulle de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Exemple : pour configurer un bouton de réinitialisation du zoom de 32 x 32 pixels et positionner six pixels sur les bords supérieur et droit de la visionneuse. Il doit afficher une image différente pour chacun des quatre états de bouton différents.
.s7basiczoomviewer .s7zoomresetbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7basiczoomviewer .s7zoomresetbutton [state='up'] {
background-image:url(images/v2/ZoomResetButton_dark_up.png);
}
.s7basiczoomviewer .s7zoomresetbutton [state='over'] {
background-image:url(images/v2/ZoomResettButton_dark_over.png);
}
.s7basiczoomviewer .s7zoomresetbutton [state='down'] {
background-image:url(images/v2/ZoomResetButton_dark_down.png);
}
.s7basiczoomviewer .s7zoomresetbutton [state='disabled'] {
background-image:url(images/v2/ZoomResetButton_dark_disabled.png);
}