Mutables Volume

Das Steuerelement für veränderliche Lautstärke wird zunächst als Schaltfläche angezeigt, mit der der Benutzer den Videoplayer-Sound stummschalten oder deaktivieren kann.

Wenn ein Benutzer den Mauszeiger über die Schaltfläche bewegt, wird ein Schieberegler angezeigt, mit dem der Benutzer die Lautstärke einstellen kann. Das veränderliche Lautstärkeregler kann relativ zur zugehörigen Steuerleiste durch CSS skaliert, geschliffen und positioniert werden.

Das Aussehen des Bereichs für veränderbare Lautstärke wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7mutablevolume

CSS-Eigenschaften des veränderlichen Volumens

Anfang	Position vom oberen Rand, einschließlich Auffüllung.
rechts	Position vom rechten Rand, einschließlich Auffüllung.
width	Die Breite der Steuerung des veränderlichen Volumens.
height	Die Höhe der Steuerung des veränderlichen Volumens.
background-color	Die Farbe der Lautstärkeregelung.

Die Darstellung der Schaltflächen "Stummschalten/Unmutieren"wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7mutablevolume .s7mutebutton

Sie können das Hintergrundbild für jeden Schaltflächenstatus steuern. Die Größe der Schaltfläche wird von der Größe der Lautstärkeregelung übernommen.

CSS-Eigenschaften des Schaltflächenbilds

background-image

Das für einen Schaltflächenstatus angezeigte Bild.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt sowohl die Attributselektoren state als auch selected, die verwendet werden können, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden. Insbesondere entspricht selected='true' dem Status "muted"und selected='false' dem Status “unmuted”.

Der Bereich für die vertikale Lautstärkenleiste wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume

CSS-Eigenschaften des Bereichs der vertikalen Lautstärkenleiste

background-color	Die Hintergrundfarbe des vertikalen Volumens.
width	Die Breite des vertikalen Volumens.
height	Die Höhe des vertikalen Volumens.

Die Gleise innerhalb der vertikalen Lautstärkeregelung wird mit den folgenden CSS-Klassenselektoren gesteuert:

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track 
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

CSS-Eigenschaften der Steuerung des vertikalen Volumens

background-color	Die Hintergrundfarbe der Steuerung des vertikalen Volumens.
width	Breite der Steuerung des vertikalen Volumens.
height	Höhe der vertikalen Lautstärkeregelung.

Der vertikale Lautstärkeregler wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob

CSS-Eigenschaften des Reglers für die Steuerung der vertikalen Lautstärke

background-image	Grafik mit vertikalem Lautstärkeregler.
background-position	Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites .
width	Breite des Reglers für die vertikale Lautstärke.
height	Höhe des vertikalen Lautstärkereglers.
links	Horizontale Position des vertikalen Lautstärkereglers.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiele

Um eine Stummschaltfläche mit 32 x 32 Pixel und einer Position von 6 Pixel von oben und 38 Pixel von der rechten Kante der Steuerleiste einzurichten. Zeigt ein anderes Bild für jeden der vier verschiedenen Schaltflächenzustände an, wenn diese ausgewählt sind oder nicht.

.s7mixedmediaviewer .s7mutablevolume { 
top:6px; 
right:38px; 
width:32px; 
height:32px; 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] { 
background-image:url(images/mute_up.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] { 
background-image:url(images/mute_over.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] { 
background-image:url(images/mute_down.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] { 
background-image:url(images/mute_disabled.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] { 
background-image:url(images/unmute_up.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] { 
background-image:url(images/unmute_over.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] { 
background-image:url(images/unmute_down.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] { 
background-image:url(images/unmute_disabled.png); 
}

Im Folgenden sehen Sie ein Beispiel dafür, wie Sie den Lautstärkeregler innerhalb der Steuerung für veränderliche Lautstärke gestalten können.

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume { 
width:36px; 
height:83px; 
left:0px; 
background-color:#dddddd; 
} 
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track { 
top:11px; 
left:14px; 
width:10px; 
height:63px; 
background-color:#666666; 
} 
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack { 
width:10px; 
background-color:#ababab; 
} 
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob { 
width:18px; 
height:10px; 
left:9px; 
background-image:url(images/volumeKnob.png); 
}