플라이아웃 확대/축소 보기

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

보고 있는 이미지의 차원이 플라이아웃 확대/축소 보기의 차원과 일치하지 않으면 이미지 컨텐츠가 플라이아웃 확대/축소 보기의 사각형 표시 영역 내에 중심이 됩니다.

기본 보기의 CSS 속성

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

.s7flyoutviewer .s7flyoutzoomview

CSS 속성

설명

배경색

기본 보기의 배경색입니다.

예 - 기본 보기를 투명하게 만들려면:

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

플라이아웃 보기의 CSS 속성

플라이아웃 보기의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

CSS 속성

설명

왼쪽

기본 보기의 왼쪽 위 모서리에 상대적인 플라이아웃 보기의 수평 위치입니다.

최상위

기본 보기의 왼쪽 위 모서리에 상대적인 플라이아웃 보기의 세로 위치입니다.

width

플라이아웃 보기의 폭입니다.

height

플라이아웃 보기의 높이입니다.

경계

플라이아웃 보기의 테두리입니다.

예 - 플라이아웃 보기를 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(불투명도-..);

경계

테두리가 강조 표시됩니다.

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

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

커서의 CSS 속성

When highlightmode 매개 변수가 cursor를 선택하면 기본 보기에서 강조 표시가 고정 크기의 커서 아트워크로 대체되며 CSS 클래스 선택기로 제어됩니다.

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

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

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

CSS 속성

설명

배경 이미지

커서 아트웍입니다.

너비

커서 너비.

높이

커서 높이입니다.

노트

커서가 input 속성 선택기: 다양한 장치에 대해 서로 다른 커서 아트워크와 크기를 적용하는 데 사용할 수 있습니다. 특히, input="mouse" 는 데스크탑 시스템에 해당하며 input="touch" 는 터치 장치에 해당합니다.

오버레이의 CSS 속성

이 overlay 매개 변수가 1에서는 강조 표시 프레임 주위의 영역 또는 커서 이미지는 CSS 클래스 선택기로 제어됩니다.

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

CSS 속성

설명

배경색

오버레이 색상.

불투명도

오버레이 불투명도.

팁 메시지의 CSS 속성

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

.s7flyoutviewer .s7flyoutzoomview .s7tip

CSS를 통해 글꼴 스타일, 크기, 모양 및 세로 오프셋을 구성할 수 있습니다. 그러나 가로 맞춤은 뷰어 논리에 의해 관리됩니다. 를 사용하여 CSS를 통해 재정의 left 또는 right 속성은 지원되지 않습니다.

CSS 속성

설명

하단

기본 뷰의 하단에서 오프셋합니다.

color

텍스트 색상.

font-family

글꼴 이름.

font-size

글꼴 크기입니다.

패딩

메시지 텍스트 주위에 패딩합니다.

배경색

메시지 텍스트의 배경색 채우기 색입니다.

테두리 반경

메시지 텍스트의 배경 테두리 반경.

불투명도

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

Internet Explorer 8의 경우 filter:alpha(불투명도-..) )

팁 메시지는 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.

예 - 흰색 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);
}

이 페이지에서는