플라이아웃 확대/축소 보기 flyout-zoom-view
기본 보기는 플라이아웃 보기에 표시된 정적 이미지와 확대/축소된 이미지로 구성됩니다. 또한 정적 이미지 위에 표시되는 강조 표시 탐색 영역과 정적 이미지 위에 표시되는 팁 메시지로 구성됩니다.
표시되는 이미지의 크기가 플라이아웃 확대/축소 보기의 크기와 일치하지 않으면 이미지 컨텐츠가 플라이아웃 확대/축소 보기의 사각형 표시 영역 내에서 가운데에 배치됩니다.
기본 보기의 CSS 속성
기본 보기의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7flyoutviewer .s7flyoutzoomview
예 - 기본 보기를 투명하게 하려면 다음을 수행합니다.
.s7flyoutviewer .s7flyoutzoomview {
background-color: transparent;
}
플라이아웃 보기의 CSS 속성
플라이아웃 보기의 모습은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.
.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
예 - 플라이아웃 보기를 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를 통한 재정의는 지원되지 않습니다.
불투명도를 강조 표시합니다.
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 속성은 다음과 같습니다.
input
특성 선택기를 지원하며, 이 선택기는 장치마다 다른 커서 아트워크와 크기를 적용하는 데 사용할 수 있습니다. 특히 input="mouse"
은(는) 데스크톱 시스템에 해당하고 input="touch"
은(는) 터치 장치에 해당합니다.오버레이의 CSS 속성
overlay
매개 변수를 1
(으)로 설정하면 강조 표시 프레임 또는 커서 이미지 주위의 영역이 CSS 클래스 선택기로 제어됩니다.
.s7flyoutviewer .s7flyoutzoomview
.s7overlay
팁 메시지의 CSS 속성
팁 메시지의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7flyoutviewer .s7flyoutzoomview .s7tip
CSS를 통해 폰트 스타일, 크기, 모양, 수직 옵셋 등을 구성할 수 있다. 그러나 수평 정렬은 뷰어 논리에 의해 관리됩니다. left
또는 right
속성을 사용하여 CSS를 통해 재정의할 수 없습니다.
메시지 텍스트의 배경 불투명도입니다.
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);
}