Menu a comparsa del pannello Info info-panel-popup

Il popup del pannello Info viene visualizzato al centro dell'area del visualizzatore quando un utente attiva una mappa immagine con la proprietà rollover_key definita in Dynamic Media Classic e se la funzione del pannello info è configurata correttamente per il visualizzatore.

Lo sfondo del pannello Info copre l’intera area del visualizzatore ed è controllato dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay

Proprietà CSS
Descrizione
background-image
Riempimento dello sfondo del pannello Info.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Vedi anche Spunti CSS.

Esempio: imposta la finestra a comparsa del pannello informazioni in modo che utilizzi uno sfondo nero semitrasparente.

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

Per impostazione predefinita, la finestra di dialogo del pannello Info viene visualizzata al centro dell'area di visualizzazione. Tuttavia, è possibile controllarne dimensioni, allineamento, sfondo e bordo con il selettore di classe CSS.

.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay

Proprietà CSS
Descrizione
left
Posizione orizzontale della finestra di dialogo del pannello informazioni all’interno del riempimento dello sfondo del pannello dell’area del visualizzatore.
top
Posizione verticale della finestra di dialogo del pannello informazioni all'interno dell'area del visualizzatore.
width
Larghezza finestra.
height
Altezza finestra di dialogo.
margin-left
Il margine sinistro della finestra di dialogo del pannello informazioni, può essere utilizzato a scopo di centraggio.
margin-top
Il margine superiore della finestra di dialogo del pannello informazioni, può essere utilizzato a scopo di centraggio.
riempimento
Spaziatura interna delle finestre di dialogo.
background-color
Colore di sfondo finestra di dialogo.
border-radius
Raggio bordo finestra di dialogo.
box-shadow
Ombra finestra di dialogo.

Esempio: imposta la finestra di dialogo del pannello di informazioni 300 x 200 pixel centrata nell’area di visualizzazione; presenta una spaziatura di 40 pixel nella parte superiore e una spaziatura di 10 pixel su tutti gli altri lati, uno sfondo grigio chiaro e un raggio del bordo di 10 pixel e un’ombra esterna.

.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);
}

Nella finestra di dialogo del pannello Info è disponibile un pulsante di chiusura e la finestra di dialogo viene chiusa quando si tocca o si fa clic sul pulsante.

L’aspetto di questo pulsante è controllato dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton

Proprietà CSS
Descrizione
top
Posizione dal bordo superiore della finestra di dialogo.
destra
Posizione dal bordo destro della finestra di dialogo.
left
Posizione dal bordo sinistro della finestra di dialogo.
bottom
Posizione dal bordo inferiore della finestra di dialogo.
width
Larghezza pulsante.
height
Altezza pulsante.
background-image
Immagine visualizzata per un determinato stato del pulsante.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Vedi anche Spunti CSS.

NOTE
Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.

La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare un pulsante di chiusura della finestra di dialogo di 28 x 28 pixel, posizionato a 5 pixel dal bordo superiore e destro della finestra di dialogo del pannello informazioni e che visualizza un'immagine diversa per ciascuno dei quattro diversi stati del pulsante.

.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