Fenêtre contextuelle du panneau Infos info-panel-popup

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

L’arrière-plan du panneau Informations couvre toute la zone de la visionneuse et est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay

propriété CSS
Description
background-image
Remplir l’arrière-plan du panneau Informations.
arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

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

.s7ecatalogsearchviewer .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 visionneuse. 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.

.s7ecatalogsearchviewer .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 la zone de visionneuse.
haut
Position verticale de la boîte de dialogue du panneau d’informations dans la zone de visionneuse.
width
Largeur de la boîte de dialogue.
height
Hauteur de la boîte de dialogue.
margin-left
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 visionneuse ; comporte une marge intérieure de 40 pixels en haut et une marge intérieure de 10 pixels 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.

.s7ecatalogsearchviewer .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 Panneau d’informations comporte un bouton de fermeture, ce qui entraîne la fermeture de la boîte de dialogue lorsque vous cliquez ou appuyez sur ce bouton.

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

.s7ecatalogsearchviewer .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.
height
Hauteur du bouton.
background-image
Image affichée pour un état de bouton donné.
arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

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

L’info-bulle de 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 d’une taille 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 qui affiche une image différente pour chacun des quatre états de bouton différents.

.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton {
 width: 28px;
 height: 28px;
 top: 5px;
 right: 5px;
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="up"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="over"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="down"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="disabled"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8