La vue principale se compose de l’image statique, de l’image zoomée affichée dans la vue de la fenêtre déroulante, de la zone de navigation de mise en surbrillance affichée sur l’image statique et du message d’info-bulle affiché au-dessus de l’image statique.

Si les dimensions de l’image affichée ne correspondent pas à celles de la vue de zoom déroulant, le contenu de l’image est centré dans la zone d’affichage du rectangle de la vue de zoom déroulant.

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

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 de la vue déroulante

L’aspect de la vue de fenêtre déroulante est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Propriété CSS	Description
gauche	Position horizontale de la vue de la fenêtre déroulante, par rapport au coin supérieur gauche de la vue principale.
haut	Position verticale de la vue de la fenêtre déroulante, par rapport au coin supérieur gauche de la vue principale.
width	Largeur de la vue de la fenêtre déroulante.
height	Hauteur de la vue de la fenêtre déroulante.
bordure	Bordure de la vue de la fenêtre déroulante.

Exemple : pour définir une vue de fenêtre déroulante sur 600 x 400 pixels, apparaissant avec un décalage de 100 pixels à droite de la vue principale de 512 x 288 pixels illustrée dans l'exemple précédent :

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom { 
 left: 612px; 
 top: 0px; 
 width: 600px; 
 height: 400px;  
}

Propriétés CSS de la mise en surbrillance dans la vue principale

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

.s7flyoutviewer .s7flyoutzoomview .s7highlight

Il est possible de contrôler l’arrière-plan, la bordure, la transparence et des attributs similaires à l’aide de CSS. Cependant, la taille et la position de l’élément DOM en surbrillance sont gérées par la logique de la visionneuse. Il n’est pas possible de le remplacer par CSS.

Propriété CSS	Description
arrière-plan-couleur	Couleur de la mise en surbrillance.
opacité	Mettez en surbrillance l’opacité. Pour Internet Explorer 8, utilisez filter:alpha(opacity-..);
bordure	Mise en surbrillance de la bordure.

Propriété CSS

Description

arrière-plan-couleur

Couleur de la mise en surbrillance.

opacité

Mettez en surbrillance l’opacité.

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

bordure

Mise en surbrillance de la bordure.

Exemple : pour configurer la mise en surbrillance verte avec une transparence de 40 % et une bordure rouge d’un pixel :

.s7flyoutviewer .s7flyoutzoomview .s7highlight { 
 background-color: green; 
 opacity: 0.4;  
 filter: alpha(opacity = 40); 
 border: 1px solid red; 
}

Propriétés CSS du curseur

Lorsque le paramètre highlightmode est défini sur cursor, les zones de surbrillance de la vue principale sont remplacées par une illustration de curseur de taille fixe, qui est contrôlée par le sélecteur de classe CSS :

 .s7flyoutviewer .s7flyoutzoomview 
.s7cursor

Il est possible de contrôler l’image d’arrière-plan et la taille à l’aide de CSS.

Les propriétés CSS applicables sont les suivantes :

Propriété CSS	Description
image d’arrière-plan	Illustration du curseur.
width	Largeur du curseur.
hauteur	Hauteur du curseur.

REMARQUE

Le curseur prend en charge le sélecteur d’attributs input, qui peut être utilisé pour appliquer une illustration et une taille de curseur différentes à différents périphériques. En particulier, input="mouse" correspond aux systèmes de bureau et input="touch" correspond aux périphériques tactiles.

Propriétés CSS de l’incrustation

Lorsque le paramètre overlay est défini sur 1, la zone autour du cadre de surbrillance ou de l'image du curseur est contrôlée avec le sélecteur de classe CSS :

 .s7flyoutviewer .s7flyoutzoomview 
.s7overlay

Propriété CSS	Description
arrière-plan-couleur	Couleur d’incrustation.
opacité	Opacité de l’incrustation.

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 de police, l’aspect de la taille et le décalage vertical par le biais 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é 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 bordure d’arrière-plan du texte du message.
opacité	Opacité d’arrière-plan du texte du message. Pour Internet Explorer 8, utilisez filter:alpha(opacity-..) )

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, un décalage de 50 pixels par rapport au bas de la vue principale, du remplissage 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); 
}