Muterbar volym mutable-volume
Inledningsvis visas den ändringsbara volymkontrollen som en knapp där användaren kan stänga av eller slå på ljudet i videospelaren.
När en användare rullar över knappen visas ett reglage som gör att användaren kan ställa in volymen. Den ändringsbara volymkontrollen kan storleksanpassas, skalas och placeras i förhållande till kontrollfältet som innehåller den av CSS.
Utseendet på området för den ändringsbara volymen styrs med följande CSS-klassväljare:
.s7video360viewer .s7mutablevolume
CSS-egenskaper för den ändringsbara volymen
Utseendet på knappen för att stänga av/slå på styrs av följande CSS-klassväljare:
.s7video360viewer .s7mutablevolume .s7mutebutton
Du kan styra bakgrundsbilden för varje knappläge. Knappens storlek ärvs från volymkontrollens storlek.
CSS-egenskaper för knappbilden
state och selected som kan användas för att tillämpa olika skal på olika knapplägen. I synnerhet motsvarar selected='true' läget “muted” och selected='false' det “unmuted” läget.Det lodräta volymfältsområdet styrs med följande CSS-klassväljare:
.s7video360viewer .s7mutablevolume .s7verticalvolume
CSS-egenskaper för det lodräta volymfältsområdet
Spåret i den lodräta volymkontrollen styrs med följande CSS-klassväljare:
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7track
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7filledtrack
CSS-egenskaper för spåret i den lodräta volymkontrollen
Den lodräta volymknappen styrs med följande CSS-klassväljare:
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7knob
CSS-egenskaper för den lodräta volymkontrollknappen
Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.
Exempel - Om du vill ställa in en ljudavstängningsknapp som är 32 x 32 pixlar och placerad 6 pixlar uppifrån och 38 pixlar från kontrollfältets högra kant. Visa olika bilder för vart och ett av de fyra olika knapplägena när de är markerade eller inte markerade.
.s7video360viewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
background-image:url(images/unmute_disabled.png);
}
Följande är ett exempel på hur du kan formatera volymreglaget i den ändringsbara volymkontrollen.
.s7video360viewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}