Visualizzazione zoom a comparsa flyout-zoom-view

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

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