대화형 견본 interactive-swatches

대화형 데이터가 구성에서 뷰어에 전달된 경우 비디오 콘텐츠 옆에 대화형 견본 패널이 표시됩니다. 맨 위에 "클릭하여 보기" 등의 텍스트를 렌더링하는 배너, 하나 이상의 대화형 견본 열 및 두 개의 스크롤 단추(데스크탑 시스템에서만 사용 가능)로 구성됩니다.

데스크탑 시스템과 터치 디바이스에서 가로 방향으로 대화형 견본이 비디오 컨텐츠의 오른쪽에 세로로 렌더링됩니다. 터치 장치에서 세로 방향으로 표시된다면 뷰어 하단에 가로 색상 견본 행으로 표시됩니다.

다음 CSS 클래스 선택기는 대화형 견본 패널의 위치 및 방향을 제어합니다.

.s7interactivevideoviewer .s7interactiveswatches

대화형 견본의 CSS 속성 css-properties-of-the-interactive-swatches

width
대화형 견본 패널의 폭
height
대화형 견본 패널의 높이입니다.
최상위
대화형 견본 패널의 위쪽 위치입니다.
하단
대화형 견본 패널의 하단 위치입니다.
왼쪽
대화형 견본 패널의 왼쪽 위치입니다.
오른쪽
대화형 견본 패널의 오른쪽 위치입니다.

대화형 견본 패널의 런타임 위치 및 방향은 다음과 같이 위의 CSS 속성의 조합으로 정의됩니다.

  • 뷰어 하단에 대화형 견본을 가로로 렌더링하려면 높이를 절대 픽셀 값으로, 왼쪽 및 아래를 0px로, 너비, 오른쪽 및 위쪽을 auto로 설정합니다.
  • 대화형 견본을 비디오 컨텐츠의 오른쪽에 세로로 렌더링하려면 너비를 절대 픽셀로, 오른쪽과 위쪽을 0픽셀로, 높이, 왼쪽 및 아래쪽을 auto로 설정합니다.

이 스타일에 CSS 마커를 사용하여 대화형 색상 견본 패널의 적응형 배치를 수행할 수 있습니다.

example

터치 디바이스에서 가로 방향으로 뷰어 하단에 가로로 렌더링하도록 대화형 견본 패널을 설정하려면. 또한 다른 모든 경우에 비디오 컨텐츠의 오른쪽에 세로로 표시하려면 다음을 수행하십시오.

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
 width:120px;
 height:auto;
 right:0px;
 top:0px;
 left:auto;
 bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
 width:auto;
 height:136px;
 right:auto;
 top:auto;
 left:0px;
 bottom:0px;
}

배너의 크기 및 위치는 CSS를 사용하여 적용된 다른 스타일을 기반으로 대화형 견본 구성 요소에서 관리하며 명시적으로 설정할 수 없습니다.

다음 CSS 클래스 선택기는 배너 패널의 모양을 제어합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7banner

배너 패널의 CSS 속성 css-properties-of-the-banner-panel

background-color
배너 패널의 배경색입니다.
color
배너 패널 내의 텍스트 색입니다.
경계
배너 패널 주변의 테두리.
font-weight
배너 패널 내의 텍스트에 사용할 글꼴 두께입니다.
font-size
배너 패널 내의 텍스트에 사용할 글꼴 크기입니다.
font-family
배너 패널 내의 텍스트에 사용할 글꼴 모음
font-align
배너 패널 내의 텍스트에 사용할 글꼴 맞춤입니다.

배너 도구 팁은 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.

section-e8caea0a303c425a8a637c2a47c06355

어두운 회색 배경과 밝은 회색 2픽셀 테두리 및 흰색 텍스트가 가로 가운데에 있는 배너를 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7banner {
    background-color: #222222;
    border-bottom: 2px solid #444444;
    color: #ffffff;
    text-align: center;
}

다음 CSS 클래스 선택기는 색상 견본의 모양을 제어합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

견본 영역의 CSS 속성 css-properties-of-the-swatches-area

background-color
견본 영역의 배경색입니다.

section-9cadd62a09fd44a280f55ff42437e416

어두운 회색 배경의 색상 견본 영역을 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
    background-color: #222222;
}

다음 CSS 클래스 선택기는 견본 썸네일 간의 간격을 제어합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

견본 썸네일 간격의 CSS 속성 css-properties-of-the-swatches-thumbnail-spacing

margin
각 썸네일 주변의 가로 및 세로 여백 크기입니다. 실제 썸네일 간격은 다음에 설정된 왼쪽 및 오른쪽 여백의 합계와 같습니다. .s7thumbcell .

section-39fb270b7e494a9d99e6e8f6890ec53c

세로 간격을 10픽셀로 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
 margin: 5px;
}

다음 CSS 클래스 선택기는 개별 썸네일의 모양을 제어합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

개별 썸네일 모양의 CSS 속성 css-properties-of-the-appearance-of-individual-thumbnails

width
썸네일의 폭.
height
썸네일의 높이입니다.
경계
썸네일의 테두리.
NOTE
썸네일은 state 속성 선택기: 다른 썸네일 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다. 특히, state="selected" 은 현재 선택한 이미지의 썸네일에 해당합니다. state="default" 은 나머지 썸네일에 해당합니다. state="over" 마우스를 가리킬 때 사용됩니다.

section-69fec189ffaa440b97b6b846c320b75b

100 x 75픽셀의 썸네일을 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
 width:100px;
 height:75px;
}

다음 CSS 클래스 선택기는 썸네일 레이블의 모양을 제어합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

썸네일 레이블 모양의 CSS 속성 css-properties-of-the-appearance-of-the-thumbnail-label

color
텍스트 색상.
경계
레이블 테두리.
text-align
가로 텍스트 정렬.
font-family
글꼴 이름.

section-eb141eb6c1154183baa69796edb90536

왼쪽 맞춤, 흰색, 12픽셀, Helvetica® 글꼴 및 아래쪽 테두리를 사용하도록 레이블을 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
 border-bottom: 1px solid #e9e9e9;
 text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}

다음 CSS 클래스 선택기는 위쪽 및 아래쪽 스크롤 단추의 모양을 제어합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

CSS를 사용하여 스크롤 단추를 배치할 수 없습니다 top, left, bottom, 및 right 속성. 대신 뷰어 로직은 속성을 자동으로 배치합니다.

위쪽 및 아래쪽 스크롤 단추 모양에 대한 CSS 속성 css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons

width
스크롤 단추의 폭입니다.
height
스크롤 단추 높이.
background-image
지정된 단추 상태에 대해 표시되는 이미지입니다.
background-position

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부의 위치입니다.

참조: CSS 스프라이트.

NOTE
이 버튼은 state 속성 선택기: 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다." up", " down", " over", 및 " disabled".

버튼 도구 팁은 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.

section-e6ce4fa084b84288bc7583342b2c510c

60 x 36픽셀인 위로 스크롤 단추를 설정하려면 각 상태에 대해 다른 아트웍을 사용하고 구성 요소의 스프라이트 이미지에서 해당 아트웍을 가져옵니다.

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
 background-size: 120px;
 width: 60px;
 height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
 background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8