Menu a comparsa del pannello Info

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

Proprietà CSS

Descrizione

background-image

Sfondo riempimento 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.

.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

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: 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

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 .

NOTA

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

In questa pagina