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