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

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

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

기본 보기의 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 속성

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

 .s7flyoutviewer .s7flyoutzoomview 
.s7cursor

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

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

오버레이의 CSS 속성

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

 .s7flyoutviewer .s7flyoutzoomview 
.s7overlay

팁 메시지의 CSS 속성

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

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

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

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