정보 패널 팝업

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

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

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

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

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

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

.s7ecatalogviewer .s7infopanelpopup .s7overlay

예 - 뷰어 영역 가운데에 있는 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

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

예 - 대화 상자 닫기 단추를 설정하려면 정보 패널 대화 상자의 위쪽 및 오른쪽 가장자리에서 5픽셀을 배치하여 4개의 서로 다른 단추 상태에 대해 다른 이미지를 표시합니다.

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