情報パネルポップアップ info-panel-popup
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
state 属性セレクターがサポートされています。このセレクターを使用して、異なるボタン状態に異なるスキンを適用できます。ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – ダイアログボックスの「閉じる」ボタンを 28 x 28 ピクセルで設定し、情報パネルダイアログの上端と右端から 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);
}