情報パネルポップアップ info-panel-popup

Dynamic Media Classicで rollover_key プロパティが定義されている画像マップをユーザーがアクティブ化したとき、および情報パネル機能がビューアに対して正しく設定されている場合、情報パネルポップアップがビューア領域の中央に表示されます。

情報パネルの背景はビューア領域全体をカバーし、次の CSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay

CSS プロパティ
説明
background-image
情報パネルの背景塗りつぶし。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

CSS スプライト ール 参照してください。

例 – 情報パネルポップアップを設定して、半透明の黒い背景を使用する

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

デフォルトでは、情報パネルダイアログはビューア領域の中央に表示されます。 ただし、CSS クラスセレクターを使用して、サイズ、整列、背景、境界線を制御することは可能です。

.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay

CSS プロパティ
説明
left
ビューア領域パネルの背景塗り潰し内の情報パネルダイアログの水平位置。
ビューア領域内での情報パネルダイアログの垂直位置。
ダイアログの幅。
高さ
ダイアログの高さ。
margin-left
情報パネルダイアログの左マージンは、センタリングに使用できます。
margin-top
情報パネルダイアログの上部の余白は、センタリング目的で使用できます。
padding
内部ダイアログのパディング。
の背景色の
ダイアログの背景色。
border-radius
ダイアログの境界線の半径。
ボックスの影の
ダイアログのシャドウ。

例 – ビューア領域の中央に 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 プロパティ
説明
ダイアログの上部のボーダーから配置します。
right
ダイアログの右側のボーダーから配置します。
left
ダイアログの左側のボーダーから配置します。
ダイアログの下のボーダーから配置します。
ボタンの幅
高さ
ボタンの高さ。
background-image
特定のボタン状態に対して表示される画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

CSS スプライト ール 参照してください。

NOTE
このボタンでは、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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8