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

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

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.

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 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 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 .

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); 
}