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

La fenêtre contextuelle du panneau Informations s’affiche au milieu de la zone de la 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 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é avec le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

Propriété CSS
Description
le image d’arrière-plan
Fond de remplissage du panneau Informations.
la position de l’arrière-plan

Positionnez à l’intérieur d’un sprite d’illustration si des sprites CSS sont utilisés.

Voir aussi desSprites CSS.

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

.s7ecatalogviewer .s7infopanelpopup .s7overlay

Propriété CSS
Description
gauche
Position horizontale de la boîte de dialogue du panneau d’informations dans le remplissage du panneau de la zone de visionneuse.
top
Position verticale de la boîte de dialogue du panneau Informations dans la zone de la visionneuse.
largeur
Largeur de la boîte de dialogue.
de hauteur
Hauteur de la boîte de dialogue.
la marge de gauche
La marge gauche de la boîte de dialogue du panneau d’informations peut être utilisée à des fins de centrage.
de la marge supérieure
La marge supérieure de la boîte de dialogue du panneau d’informations peut être utilisée à des fins de centrage.
de marge intérieure
Marge intérieure de la boîte de dialogue interne.
des de couleur d’arrière-plan
Couleur d’arrière-plan de la boîte de dialogue.
de rayon de bordure
Rayon de la bordure de la boîte de dialogue.
d'ombre
Ombre de la boîte de dialogue.

Exemple - Pour configurer une boîte de dialogue de panneau d’informations de 300 x 200 pixels centrée dans la zone de la visionneuse. Il présente une marge intérieure de 40 pixels en haut et de 10 pixels sur tous les autres côtés, un arrière-plan gris clair, 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 Panneau d’informations comporte un bouton Fermer et le fait de cliquer ou d’appuyer sur le bouton ferme la boîte de dialogue.

L’aspect de ce bouton est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7infopanelpopup .s7closebutton

Propriété CSS
Description
top
Position depuis la bordure supérieure de la boîte de dialogue.
droit
Position à partir du bord droit de la boîte de dialogue.
gauche
Position à partir du bord gauche de la boîte de dialogue.
inférieur
Position à partir de la bordure inférieure de la boîte de dialogue.
largeur
Largeur du bouton.
de hauteur
Hauteur du bouton.
le image d’arrière-plan
Image affichée pour un état de bouton donné.
la position de l’arrière-plan

Positionnez à l’intérieur d’un sprite d’illustration si des sprites CSS sont utilisés.

Voir aussi desSprites CSS.

NOTE
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 Fermer de boîte de dialogue de 28 x 28 pixels positionné à 5 pixels des bords supérieur et droit du panneau d’informations. Enfin, 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8