Visualizzazione zoom a comparsa

La visualizzazione principale consiste nell’immagine statica e nell’immagine ingrandita mostrata nella visualizzazione a comparsa sopra l’immagine statica. È inoltre costituito dal messaggio di suggerimento visualizzato sopra l’immagine statica.

Proprietà CSS della vista principale

L’aspetto della vista principale è controllato con il seguente selettore di classe CSS:

.s7flyoutviewer .s7flyoutzoomview

Proprietà CSS

Descrizione

colore di sfondo

Colore di sfondo della vista principale.

Esempio: per rendere trasparente la visualizzazione principale:

.s7flyoutviewer .s7flyoutzoomview {
 background-color: transparent;
}

Proprietà CSS del messaggio di suggerimento

L’aspetto del messaggio di suggerimento è controllato con il seguente selettore di classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7tip

È possibile configurare stile, dimensione, aspetto e offset verticale del font attraverso CSS. Tuttavia, l’allineamento orizzontale è gestito dalla logica del visualizzatore. Sovrascrittura tramite CSS utilizzando left o right proprietà non supportate.

Proprietà CSS

Descrizione

bottom

Offset dal fondo della vista principale.

color

Colore testo.

font-family

Nome carattere.

font-size

Dimensione del carattere.

spaziatura interna

Spaziatura intorno al testo del messaggio.

colore di sfondo

Colore di riempimento di sfondo del testo del messaggio.

raggio bordo

Raggio del bordo di sfondo del testo del messaggio.

opacità

Opacità di sfondo del testo del messaggio.

Per Internet Explorer 8, utilizza filtro:alfa(opacity-..) )

Il messaggio di suggerimento può essere localizzato. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

.

Esempio: per impostare un messaggio di suggerimento semitrasparente con un carattere bianco Arial® 12-px, uno scostamento di 50 pixel dal fondo della vista principale, della spaziatura e un bordo arrotondato:

.s7flyoutviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}

In questa pagina