Visualizzazione zoom a comparsa

La visualizzazione principale consiste nell’immagine statica, nell’immagine ingrandita mostrata nella visualizzazione a comparsa sopra l’immagine statica e nel 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 lo stile del font, l’aspetto delle dimensioni e l’offset verticale tramite CSS. Tuttavia, l’allineamento orizzontale è gestito dalla logica del visualizzatore. Non è supportata l’override di questa impostazione tramite CSS utilizzando le proprietà left o right .

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 filter:alpha(opacity-..) )

Il messaggio di suggerimento può essere localizzato. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

.

Esempio: per impostare un messaggio di suggerimento semitrasparente con font Arial 12px bianco, offset 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