Zoom déroulant

La vue principale se compose de l’image statique, de l’image agrandie affichée dans la vue déroulante, de la zone de navigation de surbrillance affichée au-dessus de l’image statique et du message d’info-bulle affiché 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

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 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 déroulante, par rapport au coin supérieur gauche de la vue principale.

haut

Position verticale de la vue déroulante, par rapport au coin supérieur gauche de la vue principale.

width

Largeur de la vue déroulante.

height

Hauteur de la vue déroulante.

bordure

Bordure de la vue déroulante.

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.

propriété CSS

Description

arrière-plan-couleur

Couleur du surlignage.

opacité

Mettre l’opacité en surbrillance.

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

bordure

Surlignage de la bordure.

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

Lorsque le paramètre highlightmode est défini sur cursor, les mises en surbrillance sont remplacées dans la vue principale 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é CSS

Description

background-image

Illustration du curseur.

width

Largeur du curseur.

height

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 pour différents appareils. input="mouse" correspond notamment aux systèmes de bureau et input="touch" aux appareils tactiles.

Propriétés CSS de la superposition

Lorsque le paramètre overlay est défini sur 1, la zone autour du cadre de mise en 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 de la superposition.

opacité

Opacité de la superposition.

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 au moyen de CSS. Toutefois, l’alignement horizontal est géré par la logique de la visionneuse. Le remplacement de cet élément par une page CSS à l’aide des propriétés left ou right n’est pas pris en charge.

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 la bordure d’arrière-plan du texte du message.

opacité

Opacité de l’arrière-plan du texte du message.

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

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 blanche de 12 px, un décalage de 50 pixels par rapport au bas de la vue principale, de la marge intérieure et d’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); 
}

Sur cette page