정보 패널 팝업 info-panel-popup
사용자가 Dynamic Media Classic에 rollover_key 속성이 정의된 이미지 맵을 활성화할 때, 그리고 정보 패널 기능이 뷰어에 대해 올바르게 구성된 경우 정보 패널 팝업이 뷰어 영역 중간에 표시됩니다.
정보 패널 배경은 전체 뷰어 영역을 포함하며 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay
예 - 반투명 검은색 배경을 사용하도록 정보 패널 팝업을 설정합니다.
.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay {
background-color : rgba(0,0,0,0.75);
}
기본적으로 뷰어 영역 가운데에 정보 패널 대화 상자가 표시됩니다. 그러나 크기, 정렬, 배경 및 CSS 클래스 선택기와의 테두리를 제어할 수 있습니다.
.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay
예 - 뷰어 영역 중앙에 300x200픽셀 정보 패널 대화 상자를 설정합니다. 이 대화 상자에는 맨 위에 40픽셀 패딩이 있고 다른 모든 면에 10픽셀 패딩이 있으며, 배경이 밝은 회색이고 테두리 반경과 그림자가 10픽셀입니다.
.s7ecatalogsearchviewer .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 클래스 선택기로 제어합니다.
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.
CSS 스프라이트도 참조하십시오.
state 특성 선택기를 지원하며, 이 선택기를 사용하여 다른 단추 상태에 다른 스킨을 적용할 수 있습니다.단추 도구 설명을 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 지역화를 참조하십시오.
예 - 28x28픽셀, 정보 패널 대화 상자의 위쪽 및 오른쪽 가장자리에서 5픽셀, 서로 다른 네 개의 단추 상태 각각에 대해 다른 이미지를 표시하는 대화 상자 닫기 단추를 설정합니다.
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton {
width: 28px;
height: 28px;
top: 5px;
right: 5px;
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="up"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="over"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="down"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="disabled"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}