정보 패널 팝업 info-panel-popup
사용자가 Dynamic Media Classic에 rollover_key 속성이 정의된 이미지 맵을 활성화할 때, 그리고 정보 패널 기능이 뷰어에 대해 올바르게 구성된 경우 정보 패널 팝업이 뷰어 영역 중간에 표시됩니다.
정보 패널 배경은 전체 뷰어 영역을 포함하며 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogviewer .s7infopanelpopup .s7backoverlay
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.
참조: CSS 스프라이트.
예 - 반투명 검은색 배경을 사용하도록 정보 패널 팝업을 설정합니다.
.s7ecatalogviewer .s7infopanelpopup .s7backoverlay {
background-color : rgba(0,0,0,0.75);
}
기본적으로 뷰어 영역 가운데에 정보 패널 대화 상자가 표시됩니다. 그러나 크기, 정렬, 배경 및 CSS 클래스 선택기와의 테두리를 제어할 수 있습니다.
.s7ecatalogviewer .s7infopanelpopup .s7overlay
예 - 뷰어 영역 가운데에 있는 300x200픽셀 정보 패널 대화 상자를 설정합니다. 상단이 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 스프라이트.
state 속성 선택기: 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.단추 도구 설명을 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.
예 - 정보 패널 대화 상자의 위쪽과 오른쪽 가장자리로부터 5픽셀 떨어진 위치에 28 x 28픽셀 크기의 [닫기] 단추를 사용하여 대화 상자를 설정합니다. 그리고 마지막으로, 는 네 개의 서로 다른 버튼 상태에 대해 각각 다른 이미지를 표시합니다.
.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);
}