Visualizzazione zoom a comparsa

Ultimo aggiornamento: 2023-05-22
  • Argomenti:
  • Dynamic Media Classic
    Visualizza ulteriori informazioni su questo argomento
  • Viewers
    Visualizza ulteriori informazioni su questo argomento
  • SDK/API
    Visualizza ulteriori informazioni su questo argomento
  • Inline Zoom
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Developer
    User

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

background-color

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

In questa pagina