Mode Zoom de la fenêtre déroulante flyout-zoom-view

En mode zoom intégré, la vue principale est composée de l’image statique. Il se compose également de l’image agrandie affichée dans la vue déroulante sur l’image statique et du message d’info-bulle affiché au-dessus de l’image statique.

Propriétés CSS de la zone de visionneuse principale

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

.s7mixedmediaviewer .s7flyoutzoomview
propriété CSS
Description
background-color
Couleur de fond de la vue principale.

Exemple - pour rendre la vue principale transparente :

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

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

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

Il est possible de configurer le style de police, l’aspect de la taille et le décalage vertical au moyen de CSS. Toutefois, l’alignement horizontal est géré par la logique de la visionneuse. Le remplacement de cet élément par une feuille CSS utilisant les propriétés left ou right n’est pas pris en charge.

Propriétés CSS du message de conseil

propriété CSS
Description
background-color
Couleur de fond du message.
border-radius
Rayon de la bordure de fond du message.
bottom
Décalage à partir du bas de la vue principale.
color
Couleur du texte de conseil.
font-size
Taille de police.
font-family
Famille de polices.
opacité
Opacité de l’arrière-plan du message.
padding
Marge intérieure autour du texte du message.

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 la vue principale, de la marge intérieure et d’une bordure arrondie :

.s7mixedmediaviewer .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