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 d’info-bulle affiché au-dessus d’une image statique.

Propriétés CSS de la vue principale

L’aspect de la vue principale est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7flyoutviewer .s7flyoutzoomview
propriété CSS
Description
arrière-plan-couleur
Couleur d’arrière-plan de la vue principale.

Exemple - pour rendre la vue principale transparente :

.s7flyoutviewer .s7flyoutzoomview {
 background-color: transparent;
}

Propriétés CSS du message de conseil

L’aspect du message d’info-bulle est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7flyoutviewer .s7flyoutzoomview .s7tip

Il est possible de configurer le style, la taille, l’aspect et le décalage vertical de la police au moyen de CSS. Cependant, l’alignement horizontal est géré par la logique de la visionneuse. Le remplacer par CSS à l’aide de left ou right ne sont pas prises en charge.

propriété CSS
Description
bas
Décalage à partir du bas de la vue principale.
color
Couleur du texte.
font-family
Nom de la police.
font-size
Taille de police.
remplissage
Marge intérieure autour du texte du message.
arrière-plan-couleur
Couleur de fond du texte du message.
border-radius
Rayon de la bordure d’arrière-plan du texte du message.
opacité

Opacité de l’arrière-plan du texte du message.

Pour Internet Explorer 8, utilisez filter:alpha(opacity-...) )

Le message de conseil peut être localisé. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

.

Exemple : pour configurer un message d’info-bulle semi-transparent avec une police Arial® de 12 pixels, un décalage de 50 pixels par rapport au bas de l’affichage principal, 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8