Vue Zoom déroulante flyout-zoom-view

En mode de zoom intégré, la vue principale est composée de l’image statique. Elle comprend également l’image agrandie affichée dans la vue déroulante sur l’image statique et le message de conseil 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é par le sélecteur de classe CSS suivant :

.s7mixedmediaviewer .s7flyoutzoomview

Exemple : pour rendre la vue principale transparente :

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

L’aspect du message d’info-bulle est contrôlé avec le 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 via CSS. Cependant, l’alignement horizontal est géré par la logique de la visionneuse. Son remplacement par CSS à l’aide de propriétés left ou right n’est pas pris en charge.

Propriétés CSS du message de conseil

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 de conseil semi-transparent avec une police Arial® 12 px blanche, 50 pixels décalés par rapport au bas de la vue principale, une marge intérieure et 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);
}