Menu contextuel du panneau d’informations

La fenêtre contextuelle du panneau d’informations s’affiche au milieu de la zone de visualisation lorsqu’un utilisateur active une zone cliquable dont la propriété rollover_key est définie dans Scene7 Publishing System et si la fonction du panneau d’informations est correctement configurée pour la visionneuse.

L’arrière-plan du panneau d’informations couvre toute la zone de la visionneuse et est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

Propriété CSS

Description

image d’arrière-plan

Remplir l’arrière-plan du panneau d’informations.

arrière-plan-position

Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi CSS Sprites .

Exemple : configurez la fenêtre contextuelle du panneau d’informations pour utiliser un arrière-plan noir semi-transparent.

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay { 
 background-color : rgba(0,0,0,0.75); 
}

La boîte de dialogue du panneau d’informations s’affiche par défaut au milieu de la zone de visualisation. Cependant, il est possible de contrôler sa taille, son alignement, son arrière-plan et sa bordure avec le sélecteur de classe CSS.

.s7ecatalogviewer .s7infopanelpopup .s7overlay

Propriété CSS

Description

gauche

Position horizontale de la boîte de dialogue du panneau d’informations dans le fond du panneau de zone de visualisation.

haut

Position verticale de la boîte de dialogue du panneau d’informations dans la zone de visualisation.

width

Largeur de la boîte de dialogue.

height

Hauteur de la boîte de dialogue.

marge-gauche

La marge gauche de la boîte de dialogue du panneau d’informations peut être utilisée à des fins de centrage.

margin-top

La marge supérieure de la boîte de dialogue du panneau d’informations peut être utilisée à des fins de centrage.

remplissage

Marge intérieure de la boîte de dialogue interne.

arrière-plan-couleur

Couleur d’arrière-plan de la boîte de dialogue.

border-radius

Rayon de la bordure de la boîte de dialogue.

box-shadow

Ombre de la boîte de dialogue.

Exemple : configurez une boîte de dialogue de panneau d’informations de 300 x 200 pixels centrée dans la zone de visualisation ; comporte un remplissage de 40 pixels en haut et de 10 pixels en bas sur tous les autres côtés, un arrière-plan gris clair et un rayon de bordure de 10 pixels et une ombre portée.

.s7ecatalogviewer .s7infopanelpopup .s7overlay { 
 left: 50%; 
 top: 50%; 
 margin-left: -150px; 
 margin-top: -100px; 
 width: 300px; 
 height: 200px; 
 padding-top: 40px; 
 padding-right: 10px; 
 padding-bottom: 10px; 
 padding-left: 10px; 
 background-color:rgb(221,221,221); 
 border-radius: 10px 10px 10px 10px; 
box-shadow: 0 0 5px rgba(0,0,0,0.25);  
}

La boîte de dialogue du panneau d’informations comporte un bouton de fermeture et un clic ou un appui sur le bouton permet de fermer la boîte de dialogue.

L’aspect de ce bouton est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7infopanelpopup .s7closebutton

Propriété CSS

Description

haut

Position à partir de la bordure supérieure de la boîte de dialogue.

droite

Position à partir de la bordure droite de la boîte de dialogue.

gauche

Position à partir de la bordure gauche de la boîte de dialogue.

bas

Position à partir de la bordure inférieure de la boîte de dialogue.

width

Largeur du bouton.

hauteur

Hauteur du bouton.

image d’arrière-plan

Image affichée pour un état de bouton donné.

arrière-plan-position

Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi CSS Sprites .

REMARQUE

Ce bouton prend en charge le sélecteur d’attributs state, que vous pouvez utiliser pour appliquer différents habillages à différents états de bouton.

L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer un bouton de fermeture de boîte de dialogue de 28 x 28 pixels, positionné à 5 pixels du bord supérieur et droit de la boîte de dialogue du panneau d’informations, et affiche une image différente pour chacun des quatre états de bouton différents.

.s7ecatalogviewer .s7infopanelpopup .s7closebutton { 
 width: 28px; 
 height: 28px; 
 top: 5px; 
 right: 5px; 
} 
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="up"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png); 
} 
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="over"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_over.png); 
} 
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="down"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png); 
} 
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="disabled"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png); 
}

Sur cette page