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