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

Proprietà CSS
Descrizione
immagine di sfondo
Sfondo riempimento pannello Info.
background-position

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

Vedere anche sprite 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
ha lasciato
Posizione orizzontale della finestra di dialogo del pannello informazioni all’interno del riempimento dello sfondo del pannello dell’area del visualizzatore.
primi
Posizione verticale della finestra di dialogo del pannello informazioni all'interno dell'area del visualizzatore.
larghezza
Larghezza finestra.
altezza
Altezza finestra di dialogo.
margine sinistro
Il margine sinistro della finestra di dialogo del pannello informazioni, può essere utilizzato a scopo di centraggio.
margine superiore
Il margine superiore della finestra di dialogo del pannello informazioni, può essere utilizzato a scopo di centraggio.
riempimento
Spaziatura interna delle finestre di dialogo.
colore di sfondo
Colore di sfondo finestra di dialogo.
raggio bordo
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
primi
Posizione dal bordo superiore della finestra di dialogo.
a destra
Posizione dal bordo destro della finestra di dialogo.
ha lasciato
Posizione dal bordo sinistro della finestra di dialogo.
in basso
Posizione dal bordo inferiore della finestra di dialogo.
larghezza
Larghezza pulsante.
altezza
Altezza pulsante.
immagine di sfondo
Immagine visualizzata per un determinato stato del pulsante.
background-position

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

Vedere anche sprite CSS.

NOTE
Questo pulsante supporta il selettore di attributi state, che è possibile utilizzare per applicare interfacce diverse a diversi stati di pulsante.

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8