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

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

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

기본 보기의 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를 통해 재정의하는 것은 지원되지 않습니다.

예 - 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 속성

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

 .s7flyoutviewer .s7flyoutzoomview 
.s7overlay

팁 메시지의 CSS 속성

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

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

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

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