Visualizzazione zoom a comparsa

Nella modalità zoom in linea la visualizzazione principale è costituita dall’immagine statica, dall’immagine ingrandita visualizzata 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. Non è supportata l’override di questa impostazione tramite CSS utilizzando le proprietà left o right .

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. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio: per impostare un messaggio di suggerimento semitrasparente con font Arial 12px bianco, l’offset di 50 pixel dal fondo della vista principale, della spaziatura e di 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