Visualizzazione zoom a comparsa flyout-zoom-view

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

Se le dimensioni dell'immagine visualizzata non corrispondono a quelle della visualizzazione zoom a comparsa, il contenuto dell'immagine viene centrato all'interno dell'area di visualizzazione del rettangolo della visualizzazione zoom a comparsa.

Proprietà CSS della visualizzazione principale

L’aspetto della vista principale è controllato dal seguente selettore di classe CSS:

.s7flyoutviewer .s7flyoutzoomview
Proprietà CSS
Descrizione
background-color
Colore di sfondo della visualizzazione principale.

Esempio - per rendere trasparente la visualizzazione principale:

.s7flyoutviewer .s7flyoutzoomview {
 background-color: transparent;
}

Proprietà CSS della visualizzazione a comparsa

L’aspetto della vista a comparsa è controllato dal seguente selettore di classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
Proprietà CSS
Descrizione
left
Posizione orizzontale della vista a comparsa, relativa 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 visualizzazione a comparsa.
height
Altezza della visualizzazione a comparsa.
bordo
Bordo della visualizzazione a comparsa.

Esempio: per impostare una visualizzazione a comparsa su 600 x 400 pixel, che viene visualizzata con una distanza 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 visualizzazione principale

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

.s7flyoutviewer .s7flyoutzoomview .s7highlight

Utilizzando gli stili CSS è possibile controllare sfondo, bordo, trasparenza e attributi simili. Tuttavia, la dimensione e la posizione dell’elemento DOM di evidenziazione sono gestite dalla logica del visualizzatore. La possibilità di ignorarla tramite CSS non è supportata.

Proprietà CSS
Descrizione
background-color
Colore dell'evidenziazione.
opacità

Evidenzia opacità.

Per Internet Explorer 8, utilizzare filter:alpha(opacity-...) );

bordo
Il bordo viene evidenziato.

Esempio: per impostare l'evidenziazione verde con una trasparenza del 40% e un 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 il parametro è impostato su cursor, nella visualizzazione principale le evidenziazioni vengono sostituite con immagini del cursore di dimensioni fisse, controllate con il selettore di classe CSS:

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

È possibile controllare l’immagine e le dimensioni di sfondo utilizzando gli stili CSS.

Le proprietà CSS applicabili includono:

Proprietà CSS
Descrizione
background-image
Illustrazione del cursore.
width
Larghezza cursore.
height
Altezza cursore.
NOTE
Il cursore supporta input selettore di attributi, che può essere utilizzato per applicare illustrazioni del cursore e dimensioni diverse per dispositivi diversi. In particolare: input="mouse" corrisponde ai sistemi desktop e input="touch" corrisponde ai dispositivi touch.

Proprietà CSS della sovrapposizione

Quando overlay il parametro è 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
background-color
Colore sovrapposizione.
opacità
Opacità sovrapposizione.

Proprietà CSS del messaggio di suggerimento

L’aspetto del messaggio di suggerimento è controllato dal seguente selettore di classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7tip

È possibile configurare lo stile, le dimensioni, l'aspetto e l'offset verticale del carattere tramite CSS. Tuttavia, l’allineamento orizzontale viene gestito dalla logica del visualizzatore. Sovrascriverlo tramite CSS utilizzando left o right proprietà non supportata.

Proprietà CSS
Descrizione
bottom
Offset dalla parte inferiore della vista principale.
color
Colore testo.
font-family
Nome font.
font-size
Dimensione font.
riempimento
Spaziatura intorno al testo del messaggio.
background-color
Colore di riempimento di sfondo del testo del messaggio.
border-radius
Raggio bordo sfondo del testo del messaggio.
opacità

Opacità di sfondo del testo del messaggio.

Per Internet Explorer 8, utilizzare filter:alpha(opacity-...) )

Il messaggio di suggerimento può essere localizzato. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare un messaggio di suggerimento semitrasparente con il carattere bianco Arial® 12 px, una distanza di 50 pixel dalla parte inferiore della visualizzazione principale, una spaziatura interna 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8