정보 패널 팝업

사용자가 Dynamic Media Classic에 정의된 rollover_key 속성이 있는 이미지 맵을 활성화하고 정보 패널 기능이 뷰어에 대해 올바르게 구성된 경우 뷰어 영역 중간에 정보 패널 팝업이 표시됩니다.

정보 패널 배경에는 전체 뷰어 영역이 포함되며 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

CSS 속성

설명

배경 이미지

정보 패널 채우기 배경입니다.

배경 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다.

참조 - CSS Sprite .

예 - 반투명 검정색 배경을 사용하도록 정보 패널 팝업을 설정합니다.

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay {
 background-color : rgba(0,0,0,0.75);
}

정보 패널 대화 상자는 기본적으로 뷰어 영역 중간에 표시됩니다. 그러나 CSS 클래스 선택기를 사용하여 크기, 정렬, 배경 및 테두리를 제어할 수 있습니다.

.s7ecatalogviewer .s7infopanelpopup .s7overlay

CSS 속성

설명

왼쪽

뷰어 영역 패널 배경 채우기 내의 정보 패널 대화 상자의 수평 위치입니다.

최상위

뷰어 영역 내의 정보 패널 대화 상자의 세로 위치입니다.

width

대화 상자 너비.

height

대화 상자 높이.

왼쪽 여백

정보 패널 대화 상자의 왼쪽 여백은 센터링 목적으로 사용할 수 있습니다.

여백 상단

정보 패널 대화 상자의 위쪽 여백은 센터링 목적으로 사용할 수 있습니다.

패딩

내부 대화 상자 패딩.

배경색

대화 상자 배경색입니다.

테두리 반경

대화 상자 테두리 반경.

상자 그림자

대화 상자 그림자.

예 - 뷰어 영역 가운데에 있는 300 x 200픽셀 정보 패널 대화 상자를 설정하려면 위쪽에는 40픽셀 패딩이 있고 다른 모든 측면에는 10픽셀 패딩이 있으며 밝은 회색 배경에는 10픽셀 테두리 반경과 그림자 반경이 있습니다.

.s7ecatalogviewer .s7infopanelpopup .s7overlay {
 left: 50%;
 top: 50%;
 margin-left: -150px;
 margin-top: -100px;
 width: 300px;
 height: 200px;
 padding-top: 40px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 background-color:rgb(221,221,221);
 border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.25);
}

[정보 패널] 대화 상자에 닫기 단추가 있고 버튼을 클릭하거나 탭하면 대화 상자가 닫힙니다.

이 단추의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7infopanelpopup .s7closebutton

CSS 속성

설명

최상위

대화 상자의 위쪽 테두리에서 위치를 지정합니다.

오른쪽

대화 상자의 오른쪽 테두리에서 위치를 지정합니다.

왼쪽

대화 상자의 왼쪽 테두리에서 위치를 지정합니다.

하단

대화 상자의 아래쪽 테두리에서 위치를 지정합니다.

너비

단추 너비.

높이

단추 높이.

배경 이미지

지정된 단추 상태에 대해 표시되는 이미지입니다.

배경 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다.

참조 - CSS Sprite .

노트

이 버튼은 state 속성 선택기. 다른 스킨을 다른 단추 상태에 적용하는 데 사용할 수 있습니다.

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

예 - 28 x 28픽셀이고 정보 패널 대화 상자의 위쪽 및 오른쪽 가장자리에서 5픽셀로 위치하는 대화 상자를 설정하려면 마지막으로, 에서는 네 개의 서로 다른 단추 상태에 대해 다른 이미지를 표시합니다.

.s7ecatalogviewer .s7infopanelpopup .s7closebutton {
 width: 28px;
 height: 28px;
 top: 5px;
 right: 5px;
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="up"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="over"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_over.png);
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="down"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="disabled"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}

이 페이지에서는