情報パネルのポップアップ info-panel-popup
情報パネルのポップアップは、Dynamic Media Classicで定義されたrollover_key プロパティを持つ画像マップをアクティブ化した際に、ビューア領域の中央に表示されます。また、情報パネル機能がビューアに対して適切に設定されている場合にも表示されます。
情報パネルの背景は、ビューア領域全体をカバーし、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
CSS スプライトも参照してください。
例 – 半透明の黒い背景を使用するように、情報パネルのポップアップを設定します。
.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay {
background-color : rgba(0,0,0,0.75);
}
情報パネルダイアログは、デフォルトではビューア領域の中央に表示されます。 ただし、CSS クラスセレクターを使用して、サイズ、整列、背景および境界線を制御できます。
.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay
例 – ビューア領域の中央に配置された300 x 200 ピクセルの情報パネルダイアログを設定します。上部に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属性セレクターをサポートしています。このセレクターを使用すると、異なるスキンを異なるボタンの状態に適用できます。ボタンツールのヒントはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 – 28 x 28 ピクセルで、情報パネルダイアログの上端と右端から5 ピクセルに配置され、4つの異なるボタンの状態ごとに異なる画像を表示するダイアログ閉じるボタンを設定します。
.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);
}