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

La vue principale se compose de l’image statique et de l’image agrandie affichées dans la vue déroulante. Elle comprend également la zone de navigation de surbrillance qui s’affiche sur l’image statique, et le message de conseil affiché au-dessus de l’image statique.

Si les dimensions de l’image en cours de visualisation ne correspondent pas à celles de la vue zoom déroulante, le contenu de l’image est centré dans la zone d’affichage rectangle de la vue zoom déroulante.

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

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é avec le sélecteur de classe CSS suivant :

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Exemple : pour configurer une vue déroulante de 600 x 400 pixels, apparaissant avec 100 pixels décalés à 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 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 de mise en surbrillance sont gérées par la logique de la visionneuse. Son remplacement par CSS n’est pas pris en charge.

Exemple - pour configurer une mise en surbrillance verte avec 40 % de transparence 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 highlightmode paramètre est défini sur cursor, les zones de surbrillance dans la vue principale sont remplacées par des illustrations de curseur de taille fixe, qui sont contrôlées par le sélecteur de classe CSS :

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

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

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

Propriétés CSS du recouvrement

Lorsque le paramètre overlay est défini sur 1, la zone entourant le cadre de surbrillance ou 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é avec le sélecteur de classe CSS suivant :

.s7flyoutviewer .s7flyoutzoomview .s7tip

Il est possible de configurer le style, la taille, l’apparence et le décalage vertical de la police à l’aide de 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.

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