Affichage de zoom déroulant flyout-zoom-view
La vue principale se compose de l’image statique et de l’image agrandie affichée dans la vue déroulante au-dessus de l’image statique. Il se compose également du message de conseil affiché au-dessus de l’image statique.
Propriétés CSS de la vue principale
L’aspect de la vue principale est contrôlé par le sélecteur de classe CSS suivant :
.s7flyoutviewer .s7flyoutzoomview
Exemple - pour rendre la vue principale transparente :
.s7flyoutviewer .s7flyoutzoomview {
background-color: transparent;
}
Propriétés CSS du message de conseil
L’aspect du message de conseil est contrôlé par le sélecteur de classe CSS suivant :
.s7flyoutviewer .s7flyoutzoomview .s7tip
Il est possible de configurer le style, la taille, l’apparence et le décalage vertical de la police via CSS. Toutefois, l’alignement horizontal est géré par la logique de la visionneuse. Il n’est pas possible de le remplacer par le biais de CSS à l’aide left des propriétés OR right .
Opacité d’arrière-plan du texte du message.
Pour Internet Explorer 8, utilisez filter :alpha(opacité-...) )
Le message du conseil peut être localisé. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.
.
Exemple : pour configurer un message de conseil semi-transparent avec une police Arial® blanche 12 px, décalée de 50 pixels par rapport au bas de la vue principale, une marge intérieure et une bordure arrondie :
.s7flyoutviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}