Popup pannello informazioni

Quando un utente attiva una mappa immagine con una proprietà rollover_key definita in Dynamic Media Classic e se la funzione del pannello informazioni è configurata correttamente per il visualizzatore, viene visualizzato al centro dell’area del visualizzatore.

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

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

Proprietà CSS

Descrizione

immagine di sfondo

Sfondo di riempimento del pannello informazioni.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Vedi anche Sprite CSS .

Esempio: impostare la finestra a comparsa del pannello informazioni per utilizzare uno sfondo nero semitrasparente.

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

La finestra di dialogo del pannello informazioni viene visualizzata per impostazione predefinita al centro dell’area del visualizzatore. Tuttavia è possibile controllarne le dimensioni, l’allineamento, lo sfondo e il bordo con il selettore di classe CSS.

.s7ecatalogviewer .s7infopanelpopup .s7overlay

Proprietà CSS

Descrizione

sinistra

Posizione orizzontale della finestra di dialogo del pannello informazioni all’interno del riempimento di 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 di dialogo.

height

Altezza finestra di dialogo.

margine sinistro

Il margine sinistro della finestra di dialogo del pannello informazioni può essere utilizzato a scopo di centratura.

margine superiore

Il margine superiore della finestra di dialogo del pannello informazioni può essere utilizzato a scopo di centratura.

spaziatura interna

Margine finestra di dialogo interno.

colore di sfondo

Colore di sfondo della finestra di dialogo.

raggio bordo

Raggio del bordo della finestra di dialogo.

ombra

Ombra finestra di dialogo.

Esempio: per impostare una finestra di dialogo con pannello Info di 300 x 200 pixel centrata nell’area del visualizzatore. Dispone di 40 pixel nella parte superiore e di 10 pixel nella spaziatura su tutti gli altri lati, uno sfondo grigio chiaro, un raggio di 10 pixel per il bordo 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 Info Panel (Pannello Info) è presente un pulsante Chiudi e quando si tocca o fa clic sul pulsante viene chiusa la finestra di dialogo.

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

.s7ecatalogviewer .s7infopanelpopup .s7closebutton

Proprietà CSS

Descrizione

top

Posizione dal bordo superiore della finestra di dialogo.

right

Posizione dal bordo destro della finestra di dialogo.

sinistra

Posizione dal bordo sinistro della finestra di dialogo.

bottom

Posizione dal bordo inferiore della finestra di dialogo.

larghezza

Larghezza pulsante.

altezza

Altezza del pulsante.

immagine di sfondo

Immagine visualizzata per un determinato stato del pulsante.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Vedi anche Sprite CSS .

NOTA

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

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

Esempio: per impostare una finestra di dialogo Pulsante Chiudi che è 28 x 28 pixel e si trova a 5 pixel dal bordo superiore e destro della finestra di dialogo del pannello informazioni. Infine, visualizza un'immagine diversa per ciascuno dei quattro stati del pulsante.

.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