Visualizzazione zoom a comparsa

La vista principale è costituita dall’immagine statica e dall’immagine ingrandita mostrata nella vista a comparsa. È inoltre costituito dall’area di navigazione evidenziata visualizzata sull’immagine statica e dal messaggio di suggerimento visualizzato sopra l’immagine statica.

Se le dimensioni dell’immagine visualizzata non corrispondono alle dimensioni della visualizzazione a comparsa dello zoom, il contenuto dell’immagine viene centrato all’interno dell’area di visualizzazione rettangolare della visualizzazione a comparsa.

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 della visualizzazione a comparsa

L’aspetto della visualizzazione a comparsa è controllato con il seguente selettore di classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Proprietà CSS

Descrizione

sinistra

Posizione orizzontale della vista a comparsa rispetto all’angolo superiore sinistro della vista principale.

top

Posizione verticale della vista a comparsa rispetto all’angolo superiore sinistro della vista principale.

width

Larghezza della vista a comparsa.

height

Altezza della visualizzazione a comparsa.

border

Bordo della visualizzazione a comparsa.

Esempio: per impostare una visualizzazione a comparsa su 600 x 400 pixel, con uno scostamento di 100 pixel a destra della visualizzazione principale 512 x 288 mostrata nell’esempio precedente:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
 left: 612px;
 top: 0px;
 width: 600px;
 height: 400px;
}

Proprietà CSS dell’evidenziazione nella vista principale

L’aspetto dell’evidenziazione nella vista principale è controllato con il seguente selettore di classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7highlight

È possibile controllare lo sfondo, il bordo, la trasparenza e attributi simili utilizzando CSS. Tuttavia, le dimensioni e la posizione dell’elemento DOM evidenziato sono gestite dalla logica del visualizzatore. Non è supportata la possibilità di bypassarla tramite CSS.

Proprietà CSS

Descrizione

colore di sfondo

Colore dell'evidenziazione.

opacità

Evidenzia l'opacità.

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

border

Il bordo è evidenziato.

Esempio: per impostare l’evidenziazione verde con trasparenza del 40% e bordo rosso di un pixel:

.s7flyoutviewer .s7flyoutzoomview .s7highlight {
 background-color: green;
 opacity: 0.4;
 filter: alpha(opacity = 40);
 border: 1px solid red;
}

Proprietà CSS del cursore

Quando highlightmode è impostato su cursor, l’evidenziazione si trova nella vista principale viene sostituita da un’immagine a cursore a dimensione fissa, controllata dal selettore di classi CSS:

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

È possibile controllare l'immagine di sfondo e le dimensioni utilizzando CSS.

Le proprietà CSS applicabili includono:

Proprietà CSS

Descrizione

immagine di sfondo

Immagine del cursore.

larghezza

Larghezza cursore.

altezza

Altezza del cursore.

NOTA

Il cursore supporta input selettore di attributi, che può essere utilizzato per applicare immagini e dimensioni del cursore diverse per dispositivi diversi. In particolare, input="mouse" corrisponde ai sistemi desktop e input="touch" corrisponde ai dispositivi touch.

Proprietà CSS della sovrapposizione

Quando il overlay è impostato su 1, l’area intorno al fotogramma di evidenziazione o all’immagine del cursore viene controllata con il selettore di classe CSS:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

Proprietà CSS

Descrizione

colore di sfondo

Colore sovrapposto.

opacità

Sovrapponi opacità.

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