Visualizzazione zoom a comparsa

La vista principale è costituita dall’immagine statica, dall’immagine ingrandita mostrata nella visualizzazione a comparsa, dall’area di navigazione evidenziata visualizzata sull’immagine statica e dal messaggio di suggerimento visualizzato sull’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, utilizzare filter:alpha(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 il parametro highlightmode è impostato su cursor, l'evidenziazione si trova nella vista principale viene sostituita da un'immagine cursore a dimensione fissa, controllata dal selettore di classe 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 il selettore di attributi input , che può essere utilizzato per applicare diverse immagini e dimensioni del cursore per diversi dispositivi. In particolare, input="mouse" corrisponde ai sistemi desktop e input="touch" corrisponde ai dispositivi touch.

Proprietà CSS della sovrapposizione

Quando il parametro 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 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