Zoom déroulant

La vue principale est composée de l’image statique, de l’image agrandie affichée dans la vue déroulante au-dessus de l’image statique et du message d’info-bulle affiché au-dessus de l’image statique.

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 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