Il pannello campioni interattivi viene visualizzato accanto al contenuto video se i dati interattivi sono stati passati al visualizzatore nella configurazione. È costituito da un banner nella parte superiore che esegue il rendering del testo, ad esempio "Fai clic per visualizzare", 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, in orientamento orizzontale, i campioni interattivi vengono riprodotti verticalmente a destra del contenuto video. Sui dispositivi touch con orientamento verticale, vengono visualizzati 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 dei campioni interattivi:
.s7interactivevideoviewer .s7interactiveswatches
width |
Larghezza del pannello dei campioni interattivi |
height |
Altezza del pannello dei campioni interattivi. |
top |
Posizione superiore del pannello dei campioni interattivi. |
bottom |
Posizione inferiore del pannello dei campioni interattivi. |
left |
Posizione sinistra del pannello dei campioni interattivi. |
destra |
Posizione destra nel pannello dei campioni interattivi. |
La posizione in fase di esecuzione e l’orientamento del pannello dei campioni interattivi sono definiti da una combinazione delle proprietà CSS sopra riportate, come segue:
Con questo stile è possibile utilizzare marcatori CSS per ottenere il posizionamento adattivo del pannello dei campioni interattivo.
Impostare un pannello di campioni interattivo per il rendering orizzontale nella parte inferiore del visualizzatore sui 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 vengono gestite dal componente campioni interattivi in base ad altri stili applicati con gli stili CSS e non possono essere impostate in modo esplicito.
Il seguente selettore di classe CSS controlla l'aspetto del pannello del banner:
.s7interactivevideoviewer .s7interactiveswatches .s7banner
background-color |
Colore di sfondo del pannello del banner. |
color |
Colore del testo nel pannello del banner. |
bordo |
Bordo intorno al pannello del banner. |
font-weight |
Spessore del font da utilizzare per il testo all'interno del pannello del banner. |
font-size |
Dimensione 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 del banner. |
font-align |
Allineamento del font da utilizzare per il testo all'interno del pannello del banner. |
La descrizione del banner può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Per impostare un banner con sfondo grigio scuro, bordo grigio più chiaro di due pixel e 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
background-color |
Colore di sfondo dell'area dei campioni. |
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
margine |
Dimensione del margine orizzontale e verticale intorno a ciascuna miniatura. La spaziatura effettiva delle miniature è uguale alla somma dei margini sinistro e destro impostati per .s7thumbcell . |
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
width |
Larghezza della miniatura. |
height |
Altezza della miniatura. |
bordo |
Bordo della miniatura. |
La miniatura supporta state
selettore di attributi, che può essere utilizzato per applicare skin diversi a stati di miniature diversi. In particolare: state="selected"
corrisponde alla miniatura dell'immagine attualmente selezionata; state="default"
corrisponde al resto delle miniature; state="over"
al passaggio del mouse.
Per impostare miniature di 100 x 75 pixel:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
width:100px;
height:75px;
}
Il seguente selettore di classe CSS controlla l’aspetto dell’etichetta della miniatura:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label
color |
Colore testo. |
bordo |
Bordo etichetta. |
text-align |
Allineamento orizzontale del testo. |
font-family |
Nome font. |
Per impostare le etichette in modo da utilizzare caratteri Helvetica® bianchi, allineati a sinistra e con 12 pixel 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 e verso il basso:
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton
.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton
Non è possibile posizionare i pulsanti di scorrimento utilizzando CSS top
, left
, bottom
, e right
proprietà; al contrario, la logica di visualizzazione li posiziona automaticamente.
width |
Larghezza del pulsante di scorrimento. |
height |
Altezza del pulsante di scorrimento. |
background-image |
Immagine visualizzata per un determinato stato del pulsante. |
background-position |
La posizione all'interno dello sprite del disegno, se vengono utilizzati sprite CSS. Vedi anche Spunti CSS . |
Questo pulsante supporta state
il selettore di attributi, che puoi utilizzare per applicare skin diversi agli stati dei pulsanti: " up
", " down
", " over
", e " disabled
".
Le descrizioni dei pulsanti possono essere localizzate. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Per impostare un pulsante di scorrimento verso l'alto di 60 x 36 pixel, avere un disegno diverso per ciascuno stato e prendere tale disegno dall'immagine di 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; }