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
colore di sfondo
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
ha lasciato
Posizione orizzontale della vista a comparsa, relativa all'angolo superiore sinistro della vista principale.
primi
Posizione verticale della vista a comparsa rispetto all'angolo superiore sinistro della vista principale.
larghezza
Larghezza della visualizzazione a comparsa.
altezza
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
colore di sfondo
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 il parametro highlightmode è impostato su cursor, le evidenziazioni nella visualizzazione principale vengono sostituite con immagini del cursore a dimensione fissa, controllate tramite 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
immagine di sfondo
Illustrazione del cursore.
larghezza
Larghezza cursore.
altezza
Altezza cursore.
NOTE
Il cursore supporta il selettore di attributi input, che può essere utilizzato per applicare disegni e dimensioni del cursore diversi per dispositivi diversi. In particolare, input="mouse" corrisponde ai sistemi desktop e input="touch" 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 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. L'override tramite CSS tramite le proprietà left o right non è supportato.

Proprietà CSS
Descrizione
in basso
Offset dalla parte inferiore della vista principale.
colore
Colore testo.
famiglia di caratteri
Nome font.
font-size
Dimensione font.
riempimento
Spaziatura intorno al testo del messaggio.
colore di sfondo
Colore di riempimento di sfondo del testo del messaggio.
raggio bordo
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. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

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