Campioni interattivi

Se i dati interattivi sono stati passati al visualizzatore in configurazione, il pannello campioni interattivi viene visualizzato accanto al contenuto video. È costituito da un banner nella parte superiore che esegue il rendering del testo, ad esempio "Click to View", una colonna di uno o più campioni interattivi e due pulsanti di scorrimento (disponibili solo sui sistemi desktop).

Sui sistemi desktop e sui dispositivi touch, con orientamento orizzontale, i campioni interattivi vengono rappresentati verticalmente a destra del contenuto video. Sui dispositivi touch con orientamento verticale appaiono nella parte inferiore del visualizzatore, come una riga orizzontale di campioni.

Il seguente selettore di classe CSS controlla la posizione e l’orientamento del pannello campioni interattivi:

.s7interactivevideoviewer .s7interactiveswatches

Proprietà CSS dei campioni interattivi

width

Larghezza del pannello Campioni interattivi

height

Altezza del pannello Campioni interattivi.

top

Posizione superiore del pannello Campioni interattivi.

bottom

Posizione inferiore del pannello Campioni interattivi.

sinistra

Posizione a sinistra del pannello Campioni interattivi.

right

Posizione destra del pannello Campioni interattivi.

La posizione e l’orientamento in fase di esecuzione del pannello campioni interattivi è definito da una combinazione delle proprietà CSS di cui sopra, come segue:

  • Per eseguire il rendering orizzontale dei campioni interattivi nella parte inferiore del visualizzatore, impostate l’altezza su un valore in pixel assoluto; da sinistra e dal basso a 0 px; larghezza, destra e dall'alto verso l'auto.
  • Per eseguire il rendering verticale dei campioni interattivi a destra del contenuto video, impostate la larghezza su un pixel assoluto; da destra e dall'alto a 0px; altezza, sinistra e inferiore a automatica.

Con questo stile è possibile utilizzare i marcatori CSS per ottenere un posizionamento adattivo del pannello campioni interattivi.

Esempio

Impostazione di un pannello di campioni interattivi per il rendering orizzontale nella parte inferiore del visualizzatore su dispositivi touch con orientamento orizzontale. E, per mostrarlo verticalmente a destra del contenuto video in tutti gli altri casi:

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches, 
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches { 
 width:120px; 
 height:auto; 
 right:0px; 
 top:0px; 
 left:auto; 
 bottom:auto; 
} 
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches { 
 width:auto; 
 height:136px; 
 right:auto; 
 top:auto; 
 left:0px; 
 bottom:0px; 
}

Le dimensioni e la posizione del banner sono gestite dal componente campioni interattivi in base ad altri stili applicati con CSS e non possono essere impostati in modo esplicito.

Il seguente selettore di classe CSS controlla l’aspetto del pannello banner:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

Proprietà CSS del pannello banner

colore di sfondo

Colore di sfondo del pannello banner.

color

Colore del testo all’interno del pannello del banner.

border

Bordo intorno al pannello banner.

font-weight

Lo spessore del font da utilizzare per il testo all’interno del pannello del banner.

font-size

Dimensione del font da utilizzare per il testo all’interno del pannello del banner.

font-family

Famiglia di font da utilizzare per il testo all’interno del pannello banner.

font-align

Allineamento del font da utilizzare per il testo all’interno del pannello del banner.

La descrizione del banner può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio

Per impostare un banner con sfondo grigio scuro, un bordo di due pixel grigio più chiaro e il testo bianco centrato orizzontalmente:

.s7interactivevideoviewer .s7interactiveswatches .s7banner { 
    background-color: #222222; 
    border-bottom: 2px solid #444444; 
    color: #ffffff; 
    text-align: center; 
}

Il seguente selettore di classe CSS controlla l’aspetto dei campioni:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

Proprietà CSS dell’area campioni

colore di sfondo

Colore di sfondo dell’area dei campioni.

Esempio

Per impostare l’area dei campioni con sfondo grigio scuro:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches { 
    background-color: #222222; 
}

Il seguente selettore di classe CSS controlla la spaziatura tra le miniature dei campioni:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

Proprietà CSS della spaziatura delle miniature dei campioni

margine

Dimensione del margine orizzontale e verticale intorno a ciascuna miniatura. La spaziatura effettiva delle miniature è uguale alla somma del margine sinistro e destro impostato per .s7thumbcell .

Esempio

Per impostare la spaziatura verticale su dieci pixel:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell { 
 margin: 5px; 
}

Il seguente selettore di classe CSS controlla l’aspetto delle singole miniature:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

Proprietà CSS dell’aspetto delle singole miniature

larghezza

Larghezza della miniatura.

altezza

Altezza della miniatura.

border

Bordo della miniatura.

NOTA

La miniatura supporta il selettore di attributi state , che può essere utilizzato per applicare skin diversi a diversi stati di miniatura. In particolare, state="selected" corrisponde alla miniatura dell'immagine attualmente selezionata; state="default" corrisponde alle altre miniature; state="over" viene utilizzato al passaggio del mouse.

Esempio

Per impostare miniature da 100 x 75 pixel:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb { 
 width:100px; 
 height:75px; 
}

Il seguente selettore di classe CSS controlla l’aspetto dell’etichetta di miniatura:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

Proprietà CSS dell’aspetto dell’etichetta miniatura

color

Colore testo.

border

Bordo etichetta.

text-align

Allineamento orizzontale del testo.

font-family

Nome carattere.

Esempio

Per impostare le etichette in modo che utilizzino un carattere allineato a sinistra, bianco, 12 pixel, in Helvetica® e un bordo inferiore:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label { 
 border-bottom: 1px solid #e9e9e9; 
 text-align: left; 
color: #ffffff; 
font-family: Helvetica,sans-serif; 
font-size: 12px; 
}

Il seguente selettore di classe CSS controlla l’aspetto dei pulsanti di scorrimento verso l’alto o verso il basso:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

Non è possibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS top, left, bottom e right; invece, la logica del visualizzatore li posiziona automaticamente.

Proprietà CSS dell’aspetto dei pulsanti di scorrimento verso l’alto o verso il basso

larghezza

Larghezza del pulsante di scorrimento.

altezza

Altezza del pulsante di scorrimento.

immagine di sfondo

Immagine visualizzata per un determinato stato del pulsante.

posizione di sfondo

La posizione all’interno dello sprite dell’immagine, se vengono utilizzati gli spriti CSS.

Vedi anche Sprite CSS .

NOTA

Questo pulsante supporta il selettore di attributi state , che può essere utilizzato per applicare interfacce diverse agli stati del pulsante: " up", " down", " over" e " disabled".

Le descrizioni dei pulsanti possono essere localizzate. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio

Per impostare un pulsante di scorrimento verso l’alto di 60 x 36 pixel, è necessario disporre di immagini diverse per ogni stato e preleva l’immagine dallo sprite del componente:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton { 
 background-size: 120px; 
 width: 60px; 
 height: 36px;  
} 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] { 
 background-image: url(images/v2/InteractiveSwatches_light_sprite.png); 
} 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; } 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; } 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; } 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }

In questa pagina