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. Il comprend également la zone de navigation en surbrillance qui s’affiche sur l’image statique et le message d’info-bulle qui s’affiche au-dessus de l’image statique.

Si les dimensions de l’image en cours de visualisation ne correspondent pas aux dimensions du zoom déroulant, le contenu de l’image est centré dans la zone d’affichage rectangle du zoom déroulant.

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

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 déroulante est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Exemple : pour configurer une vue déroulante à 600 x 400 pixels, apparaissant avec un décalage de 100 pixels à droite de la vue principale de 512 x 288 affiché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é à l’aide du 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. Toutefois, la taille et la position de l’élément DOM de surbrillance sont gérées par la logique de la visionneuse. Le remplacement de l’application par le biais de CSS n’est pas pris en charge.

Exemple : pour configurer une 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

When highlightmode est défini sur cursor, les mises en surbrillance se trouvent dans la vue principale et sont remplacées par l’illustration du curseur à 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 incluent :

Propriétés CSS de la superposition

Lorsque la variable overlay est défini sur 1, la zone autour du cadre de surbrillance ou de l’image du curseur est contrôlée par le sélecteur de classe CSS :

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

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.

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);
}