Visualizzazione zoom a comparsa

In modalità zoom in linea, la visualizzazione principale è costituita dall’immagine statica. È inoltre costituito dall’immagine ingrandita mostrata nella visualizzazione a comparsa sull’immagine statica e dal messaggio di suggerimento visualizzato sull’immagine statica.

Proprietà CSS dell’area visualizzatore principale

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

.s7mixedmediaviewer .s7flyoutzoomview

Proprietà CSS

Descrizione

colore di sfondo

Colore di sfondo della vista principale.

Esempio: per rendere trasparente la visualizzazione principale:

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

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

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

È possibile configurare lo stile del font, l’aspetto delle dimensioni e l’offset verticale tramite CSS. Tuttavia, l’allineamento orizzontale è gestito dalla logica del visualizzatore. Sovrascrittura tramite CSS utilizzando left o right proprietà non supportate.

Proprietà CSS del messaggio di suggerimento

Proprietà CSS

Descrizione

colore di sfondo

Colore di riempimento dello sfondo del messaggio.

raggio bordo

Raggio del bordo dello sfondo del messaggio.

bottom

Offset dal fondo della vista principale.

color

Colore testo punta.

font-size

Dimensione del carattere.

font-family

Famiglia di caratteri.

opacità

Opacità di sfondo del messaggio.

spaziatura interna

Spaziatura intorno al testo del messaggio.

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

Esempio: per impostare un messaggio di suggerimento semitrasparente con un carattere bianco Arial® 12-px, uno scostamento di 50 pixel dal fondo della vista principale, della 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);
}

In questa pagina