Fenêtre contextuelle du panneau d’informations 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 fonctionnalité de 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 :
.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay
Position à l’intérieur du sprite de l’illustration, si des sprites CSS sont utilisés.
Voir aussi SpritesCSS.
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 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.
.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay
Exemple : configurez une boîte de dialogue de panneau d’informations de 300 x 200 pixels centrée sur la zone de la visionneuse ; A un remplissage de 40 pixels en haut et un remplissage de 10 pixels sur tous les autres côtés, un arrière-plan gris clair et un rayon de bordure et une ombre portée de 10 pixels.
.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 a un bouton Fermer, et cliquez ou appuyez 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 :
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton
Position à l’intérieur du sprite de l’illustration, si des sprites CSS sont utilisés.
Voir aussi SpritesCSS.
state , que vous pouvez utiliser pour appliquer différents habillages à différents états de bouton.L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.
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.
.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);
}