Affichage de 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 de mise en surbrillance affichée sur l’image statique et le message de conseil affiché au-dessus de l’image statique.

Si les dimensions de l’image affichée ne correspondent pas aux dimensions de la vue de zoom déroulante, le contenu de l’image est centré dans la zone d’affichage rectangulaire de la vue de 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é par le 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 illustrée dans l’exemple précédent :

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

Propriétés CSS du surlignage 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. Toutefois, la taille et la position de l’élément DOM de mise en surbrillance sont gérées par la logique de la visionneuse. Le remplacement par CSS n’est pas pris en charge.

Exemple - pour définir un surlignage vert 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 highlightmode le paramètre est défini sur cursor, mettre en surbrillance sont dans la vue principale est remplacé 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 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 overlay paramètre est défini sur 1, la zone autour du cadre de surbrillance ou de l’image du curseur est contrôlée à l’aide du sélecteur de classe CSS :

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

Propriétés CSS du message de conseil

L’aspect du message de conseil est contrôlé par 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 via CSS. Toutefois, l’alignement horizontal est géré par la logique de la visionneuse. Il n’est pas possible de le remplacer par le biais de CSS à l’aide left des propriétés OR right .

Le message du conseil peut être localisé. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple : pour configurer un message de conseil semi-transparent avec une police Arial® blanche 12 px, décalée de 50 pixels par rapport au bas de la vue principale, 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);
}