Visualizzazione zoom a comparsa flyout-zoom-view

Nella modalità zoom in linea, la visualizzazione principale è costituita dall'immagine statica. È inoltre costituito dall'immagine ingrandita visualizzata nella finestra a comparsa sull'immagine statica e dal messaggio di suggerimento visualizzato sopra l'immagine statica.

Proprietà CSS dell'area visualizzatore principale

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

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

Esempio - per rendere trasparente la visualizzazione principale:

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

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

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

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

Proprietà CSS del messaggio di suggerimento

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

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, 50 pixel di offset dalla parte inferiore della vista principale, spaziatura e un bordo arrotondato:

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