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:
.s7ecatalogviewer .s7infopanelpopup .s7backoverlay
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.
.s7ecatalogviewer .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.
.s7ecatalogviewer .s7infopanelpopup .s7overlay
Esempio: per impostare la finestra di dialogo del pannello di informazioni 300 x 200 pixel centrata nell'area di visualizzazione. Ha una spaziatura di 40 pixel nella parte superiore e una spaziatura di 10 pixel su tutti gli altri lati, uno sfondo grigio chiaro, un raggio del bordo di 10 pixel e un'ombra esterna.
.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);
}
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:
.s7ecatalogviewer .s7infopanelpopup .s7closebutton
Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.
Vedi anche Spunti CSS.
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 una finestra di dialogo Chiudi il pulsante che è 28 x 28 pixel ed è posizionato a 5 pixel dal bordo superiore e destro della finestra di dialogo del pannello informazioni. Infine, visualizza un'immagine diversa per ciascuno dei quattro diversi stati dei pulsanti.
.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);
}