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

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

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

기본 보기의 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(opacity-...);

경계

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

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

설명

배경 이미지

커서 아트웍입니다.

너비

커서 너비.

높이

커서 높이입니다.

노트

커서는 input 속성 선택기를 지원합니다. 이 선택기는 다른 장치에 대해 다른 커서 아트워크와 크기를 적용하는 데 사용할 수 있습니다. 특히 input="mouse"은 데스크탑 시스템에 해당하고 input="touch"은 터치 장치에 해당합니다.

오버레이의 CSS 속성

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

 .s7flyoutviewer .s7flyoutzoomview 
.s7overlay

CSS 속성

설명

배경색

오버레이 색상.

불투명도

오버레이 불투명도.

팁 메시지의 CSS 속성

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

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

CSS 속성

설명

하단

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

color

텍스트 색상.

font-family

글꼴 이름.

font-size

글꼴 크기입니다.

패딩

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

배경색

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

테두리 반경

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

불투명도

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

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); 
}

이 페이지에서는