Meerbaar volume mutable-volume

Het veranderbare volumeregelaar verschijnt aanvankelijk als knoop die een gebruiker het geluid van de videospeler laat dempen of dempen.

Wanneer een gebruiker de muis over de knop beweegt, wordt een schuifregelaar weergegeven waarmee de gebruiker het volume kan instellen. De veranderbare volumeregeling kan door CSS worden gerangschikt, worden geschilderd, en, met betrekking tot de controlebar worden geplaatst die het bevat.

De vormgeving van het veranderbare volumegebied wordt bepaald door de volgende CSS-klassenkiezer:

.s7interactivevideoviewer .s7mutablevolume

CSS-eigenschappen van het veranderbare volume

top
Positie vanaf de bovenrand, inclusief opvulling.
right
Positie vanaf de rechterrand, inclusief opvulling.
width
De breedte van de veranderbare volumeregeling.
height
De hoogte van de veranderbare volumeregeling.
background-color
De kleur van de veranderbare volumeregeling.

De vormgeving van de knop dempen/dempen wordt bepaald door de volgende CSS-klassenkiezer:

.s7interactivevideoviewer .s7mutablevolume .s7mutebutton

U kunt de achtergrondafbeelding voor elke knopstatus bepalen. De grootte van de knop wordt overgenomen van de grootte van de volumeregeling.

CSS-eigenschappen van de knopafbeelding

achtergrondafbeelding
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie CSS-sprites.

NOTE
Deze knop ondersteunt beide state en selected kenmerkkiezers, die kunnen worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden. Met name: selected='true' komt overeen met de toestand “gedempt” en selected='false' komt overeen met de status “unmuted”.

Het verticale gebied van de volumebalk wordt bestuurd met de volgende CSS-klassenkiezer:

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume

CSS-eigenschappen van het verticale gebied van de volumebalk

background-color
De achtergrondkleur van het verticale volume.
width
De breedte van het verticale volume.
height
De hoogte van het verticale volume.

De track binnen verticale volumeregeling wordt bestuurd met de volgende CSS-klassenkiezers:

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

CSS-eigenschappen van de track binnen verticale volumeregeling

background-color
De achtergrondkleur van het verticale volumeregelaar.
width
Breedte van de verticale volumeregeling.
height
Hoogte van de verticale volumeregeling.

De verticale volumeknop wordt bestuurd met de volgende CSS-klassenkiezer:

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob

CSS-eigenschappen van de verticale volumeregelaar

achtergrondafbeelding
Verticale volumeregelaar illustraties.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie CSS-sprites.

width
Breedte van de verticale volumeregelaar.
height
Hoogte van de verticale volumeregelaar.
left
Horizontale positie van de knop voor verticale volumeregeling.

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeelden section-e8caea0a303c425a8a637c2a47c06355

U stelt een dempknop in van 32 x 32 pixels en 6 pixels van de bovenkant naar 38 pixels van de rechterrand van de besturingsbalk. Geef een andere afbeelding weer voor elk van de vier verschillende knopstatussen, al dan niet geselecteerd.

.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);
}

Hieronder ziet u hoe u de volumeschuifregelaar binnen het veranderbare volumeregelaar kunt opmaken.

.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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8