Ce bouton permet à la visionneuse d’entrer ou de quitter le mode plein écran lorsqu’elle est sélectionnée par l’utilisateur. Il est utilisé lorsque la visionneuse affiche des images ou des visionneuses à 360°. Ce bouton ne s’affiche pas si la visionneuse fonctionne en mode pop-up et que le système ne prend pas en charge le mode plein écran natif. 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 :
.s7mixedmediaviewer .s7fullscreenbutton
propriété CSS |
Description |
---|---|
haut |
Position à partir de la bordure supérieure, y compris la marge intérieure. |
droite |
Position à partir de la bordure droite, y compris la marge intérieure. |
gauche |
Position à partir de la bordure gauche, y compris la marge intérieure. |
bas |
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é. |
arrière-plan-position |
Position dans l’objet d’illustration, si des sprites CSS sont utilisés. Voir Sprites CSS . |
Ce bouton prend en charge les deux state
et selected
sélecteurs d’attributs, qui peuvent être utilisés pour appliquer différents habillages à différents états de bouton. En particulier, selected='true'
correspond à l’état “plein écran” et selected='false'
correspond à l’état “normal”.
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 plein écran de 32 x 32 pixels et positionner six pixels à partir des bords supérieur et droit de la visionneuse. Enfin, affiche une image différente pour chacun des quatre états de bouton différents lorsqu’il est sélectionné ou non :
.s7mixedmediaviewer .s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}