Volume disattivabile mutable-volume
Il controllo del volume modificabile viene inizialmente visualizzato come un pulsante che consente a un utente di disattivare o riattivare l'audio del lettore video.
Quando un utente passa il mouse sul pulsante, viene visualizzato un cursore che consente di impostare il volume. Il controllo del volume modificabile può essere dimensionato, interfacciato e posizionato, rispetto alla barra di controllo che lo contiene, tramite CSS.
L'aspetto dell'area del volume variabile è controllato con la seguente classe CSS selettore:
.s7interactivevideoviewer .s7mutablevolume
Proprietà CSS del volume modificabile
L’aspetto del pulsante di disattivazione audio/attivazione audio è controllato dal seguente selettore di classe CSS:
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton
È possibile controllare l'immagine di sfondo per ogni stato del pulsante. Le dimensioni del pulsante vengono ereditate dalle dimensioni del controllo volume.
Proprietà CSS dell'immagine del pulsante
state che selected, che possono essere utilizzati per applicare interfacce diverse a stati di pulsante diversi. In particolare, selected='true' corrisponde allo stato “disattivato” e selected='false' corrisponde allo stato “non disattivato”.L'area della barra del volume verticale è controllata con la seguente classe CSS selettore:
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume
Proprietà CSS dell'area della barra del volume verticale
Il controllo del volume verticale della traccia all'interno è controllato con i seguenti selettori di classe CSS:
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
Proprietà CSS della traccia all'interno del controllo del volume verticale
La manopola verticale del volume è controllata con la seguente classe CSS selettore:
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob
Proprietà CSS della manopola di controllo del volume verticale
La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.
Esempi section-e8caea0a303c425a8a637c2a47c06355
Per impostare un pulsante di disattivazione audio di 32 x 32 pixel posizionato a 6 pixel dall'alto e a 38 pixel dal bordo destro della barra di controllo. Visualizza un'immagine diversa per ciascuno dei quattro diversi stati di pulsante quando selezionato o non selezionato.
.s7interactivevideoviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
background-image:url(images/unmute_disabled.png);
}
Di seguito è riportato un esempio di come è possibile applicare uno stile al cursore del volume all'interno del controllo del volume modificabile.
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}