플라이아웃 확대/축소 보기 flyout-zoom-view

기본 보기는 플라이아웃 보기에 표시된 정적 이미지와 확대/축소된 이미지로 구성됩니다. 또한 정적 이미지 위에 표시되는 강조 표시 탐색 영역과 정적 이미지 위에 표시되는 팁 메시지로 구성됩니다.

표시되는 이미지의 크기가 플라이아웃 확대/축소 보기의 크기와 일치하지 않으면 이미지 컨텐츠가 플라이아웃 확대/축소 보기의 사각형 표시 영역 내에서 가운데에 배치됩니다.

기본 보기의 CSS 속성

기본 보기의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7flyoutviewer .s7flyoutzoomview
CSS 속성
설명
배경색
기본 보기의 배경색입니다.

예 - 기본 보기를 투명하게 하려면 다음을 수행합니다.

.s7flyoutviewer .s7flyoutzoomview {
 background-color: transparent;
}

플라이아웃 보기의 CSS 속성

플라이아웃 보기의 모습은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
CSS 속성
설명
남음
기본 보기의 왼쪽 위 모서리를 기준으로 한 플라이아웃 보기의 가로 위치입니다.
상위
기본 보기의 왼쪽 위 모서리를 기준으로 한 플라이아웃 보기의 세로 위치입니다.
너비
플라이아웃 보기의 폭입니다.
높이
플라이아웃 보기의 높이입니다.
테두리
플라이아웃 보기의 테두리입니다.

예 - 플라이아웃 보기를 600 x 400픽셀로 설정하려면 이전 예제에 표시된 512 x 288 기본 보기의 오른쪽에 100픽셀 오프셋이 있는 상태로 표시됩니다.

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
 left: 612px;
 top: 0px;
 width: 600px;
 height: 400px;
}

기본 보기에서 강조 표시의 CSS 속성

기본 보기에서 강조 표시의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7flyoutviewer .s7flyoutzoomview .s7highlight

CSS를 이용하여 배경, 테두리, 투명도, 유사 속성을 제어할 수 있습니다. 그러나 강조 표시 DOM 요소의 크기와 위치는 뷰어 논리에 의해 관리됩니다. CSS를 통한 재정의는 지원되지 않습니다.

CSS 속성
설명
배경색
강조 표시의 색상입니다.
불투명도

불투명도를 강조 표시합니다.

Internet Explorer 8의 경우 filter:alpha(opacity-...) ); 사용

테두리
테두리 강조 표시입니다.

예 - 투명도가 40%이고 1픽셀 빨강 테두리가 있는 녹색 강조 표시를 설정하려면 다음을 수행합니다.

.s7flyoutviewer .s7flyoutzoomview .s7highlight {
 background-color: green;
 opacity: 0.4;
 filter: alpha(opacity = 40);
 border: 1px solid red;
}

커서의 CSS 속성

highlightmode 매개 변수를 cursor(으)로 설정하면 기본 보기의 강조 표시가 CSS 클래스 선택기로 제어되는 고정 크기 커서 아트웍으로 바뀝니다.

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

CSS를 이용하여 배경 이미지와 크기를 조절할 수 있습니다.

적용 가능한 CSS 속성은 다음과 같습니다.

CSS 속성
설명
배경 이미지
커서 아트워크입니다.
너비
커서 너비.
높이
커서 높이.
NOTE
커서는 input 특성 선택기를 지원하며, 이 선택기는 장치마다 다른 커서 아트워크와 크기를 적용하는 데 사용할 수 있습니다. 특히 input="mouse"은(는) 데스크톱 시스템에 해당하고 input="touch"은(는) 터치 장치에 해당합니다.

오버레이의 CSS 속성

overlay 매개 변수를 1(으)로 설정하면 강조 표시 프레임 또는 커서 이미지 주위의 영역이 CSS 클래스 선택기로 제어됩니다.

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay
CSS 속성
설명
배경색
오버레이 색상.
불투명도
오버레이 불투명도.

팁 메시지의 CSS 속성

팁 메시지의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7flyoutviewer .s7flyoutzoomview .s7tip

CSS를 통해 폰트 스타일, 크기, 모양, 수직 옵셋 등을 구성할 수 있다. 그러나 수평 정렬은 뷰어 논리에 의해 관리됩니다. left 또는 right 속성을 사용하여 CSS를 통해 재정의할 수 없습니다.

CSS 속성
설명
하단
기본 뷰의 아래쪽에서 오프셋합니다.
텍스트 색상.
font-family
글꼴 이름.
font-size
글꼴 크기입니다.
패딩
메시지 텍스트 주위에 패딩.
배경색
메시지 텍스트의 배경 채우기 색입니다.
border-radius
메시지 텍스트의 배경 테두리 반경.
불투명도

메시지 텍스트의 배경 불투명도입니다.

Internet Explorer 8의 경우 filter:alpha(opacity-...) ) 사용

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

예 - 흰색 Arial® 12px 글꼴, 기본 보기 아래쪽에서 오프셋된 50픽셀, 패딩 및 둥글게 표시된 테두리를 사용하여 반투명 팁 메시지를 설정하려면 다음 작업을 수행하십시오.

.s7flyoutviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8