사용자가 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);
}