Questo pulsante attiva e disattiva la visualizzazione dei sottotitoli codificati. Non è visibile se il parametro della didascalia non è specificato.
È possibile ridimensionare, applicare uno skin e posizionare questo pulsante, rispetto alla barra di controllo che lo contiene, utilizzando CSS.
L’aspetto di questo pulsante è controllato con il seguente selettore di classe CSS:
.s7interactivevideoviewer .s7closedcaptionbutton
Proprietà CSS del pulsante didascalia
top |
Posizione dal bordo superiore, inclusa la spaziatura. |
right |
Posizione dal bordo destro, compresa la spaziatura. |
sinistra |
Posizione dal bordo sinistro, inclusa la spaziatura. |
bottom |
Posizione dal bordo inferiore, inclusa la spaziatura. |
width |
Larghezza del pulsante a schermo intero. |
height |
Altezza del pulsante a schermo intero. |
immagine di sfondo |
Immagine visualizzata per un determinato stato del pulsante. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Consulta Sprite CSS . |
Questo pulsante supporta sia i selettori di attributi state
che selected
, che possono essere utilizzati per applicare interfacce diverse a diversi stati dei pulsanti. In particolare, selected='true'
corrisponde allo stato in cui le didascalie sono visibili e selected='false'
viene utilizzato quando le didascalie sono nascoste.
La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .
Per impostare un pulsante per sottotitoli codificati di 28 x 28 pixel. Il pulsante deve essere posizionato a quattro pixel dalla parte superiore e a 68 pixel dal bordo destro della barra di controllo. Inoltre, deve visualizzare un'immagine diversa per ciascuno dei quattro stati del pulsante diversi quando selezionato o non selezionato.
.s7interactivevideoviewer .s7closedcaptionbutton {
position:absolute;
top:4px;
right:68px;
width:28px;
height:28px;
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_up.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}