가변 볼륨

가변 볼륨 컨트롤은 처음에 사용자가 비디오 플레이어 사운드를 음소거하거나 음소거할 수 있는 단추로 나타납니다.

사용자가 단추를 롤오버하면 사용자가 볼륨을 설정할 수 있는 슬라이더가 나타납니다. 가변 볼륨 컨트롤은 CSS로 포함되어 있는 컨트롤 막대에 대해 크기 조정, skin 및 배치할 수 있습니다.

가변 볼륨 영역의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7mixedmediaviewer .s7mutablevolume

가변 볼륨의 CSS 속성

최상위

패딩을 포함하여 위쪽 테두리에서 위치를 지정합니다.

오른쪽

패딩을 포함하여 오른쪽 테두리에서 위치를 지정합니다.

width

가변 볼륨 컨트롤의 폭입니다.

height

가변 볼륨 컨트롤의 높이입니다.

배경색

가변 볼륨 컨트롤의 색입니다.

음소거/음소거 해제 단추 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7mixedmediaviewer .s7mutablevolume .s7mutebutton

각 단추 상태에 대한 배경 이미지를 제어할 수 있습니다. 단추의 크기는 볼륨 컨트롤의 크기에서 상속됩니다.

단추 이미지의 CSS 속성

배경 이미지

지정된 단추 상태에 대해 표시되는 이미지입니다.

배경 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다.

CSS Sprite 를 참조하십시오.

노트

이 버튼은 stateselected 속성 선택기를 모두 지원하며, 이 선택기는 다른 스킨(skin)을 다른 단추 상태에 적용하는 데 사용할 수 있습니다. 특히 selected='true'은 “음소거” 상태에 해당하고 selected='false'는 “음소거 해제” 상태에 해당합니다.

세로 볼륨 막대 영역은 다음 CSS 클래스 선택기로 제어됩니다.

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume

세로 볼륨 막대 영역의 CSS 속성

배경색

세로 볼륨의 배경색입니다.

너비

세로 볼륨의 폭입니다.

높이

세로 볼륨의 높이입니다.

수직 볼륨 컨트롤 내의 트랙은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

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

세로 볼륨 컨트롤의 CSS 속성

배경색

세로 볼륨 컨트롤의 배경색입니다.

너비

세로 볼륨 컨트롤의 너비입니다.

높이

세로 볼륨 컨트롤의 높이입니다.

세로 볼륨 노브는 다음 CSS 클래스 선택기로 제어됩니다.

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob

세로 볼륨 컨트롤 노브의 CSS 속성

배경 이미지

수직 볼륨 컨트롤 노브 아트웍입니다.

배경 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다.

CSS Sprite 를 참조하십시오.

너비

세로 볼륨 컨트롤 노브의 폭입니다.

높이

세로 볼륨 컨트롤 노브의 높이입니다.

왼쪽

수직 볼륨 컨트롤 노브의 수평 위치입니다.

단추 도구 팁은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소 현지화를 참조하십시오.

예제

32 x 32픽셀이고 상단에서 6픽셀이고 컨트롤 막대의 오른쪽 가장자리에서 38픽셀인 음소거 단추를 설정하려면 다음을 수행합니다. 선택하거나 선택하지 않은 경우 4개의 서로 다른 버튼 상태에 대해 다른 이미지를 표시합니다.

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

다음은 가변 볼륨 컨트롤 내에서 볼륨 슬라이더의 스타일을 지정하는 방법의 예입니다.

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

이 페이지에서는