En mode de zoom intégré, la vue principale consiste en l’image statique, l’image agrandie affichée dans la vue de la fenêtre déroulante sur l’image statique et le message d’info-bulle affiché au-dessus de l’image statique.

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

L’aspect de la vue principale est contrôlé par le sélecteur de classe CSS suivant :

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

.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. Cependant, l’alignement horizontal est géré par la logique du lecteur de contenu. Il n’est pas possible de le remplacer via CSS en utilisant les propriétés left ou right.

Propriétés CSS du message de conseil

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

Le message d’info-bulle 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 blanche de 12 px, décalage de 50 pixels par rapport au bas de la vue principale, du remplissage 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); 
}