情報パネルポップアップは、Dynamic Mediaクラシックで定義されたrollover_keyプロパティを持つ画像マップをアクティブにした場合、およびビューアに対して情報パネル機能が適切に設定されている場合に、ビューア領域の中央に表示されます。
情報パネルの背景は、ビューア領域全体に表示され、以下のCSSクラスセレクターを使用して制御します。
.s7ecatalogviewer .s7infopanelpopup .s7backoverlay
CSSプロパティ |
説明 |
---|---|
background-image |
情報パネルの背景の塗り。 |
background-position |
CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトも参照してください。 |
例 — 半透明の黒の背景を使用するように、情報パネルポップアップを設定します。
.s7ecatalogviewer .s7infopanelpopup .s7backoverlay {
background-color : rgba(0,0,0,0.75);
}
情報パネルダイアログは、初期設定でビューア領域の中央に表示されます。 ただし、CSSクラスセレクターを使用して、サイズ、整列、背景および境界線を制御できます。
.s7ecatalogviewer .s7infopanelpopup .s7overlay
CSSプロパティ |
説明 |
---|---|
左 |
ビューア領域パネルの背景の塗り内での、情報パネルダイアログの水平方向の位置。 |
トップ |
ビューア領域内での、情報パネルダイアログの垂直方向の位置。 |
width |
ダイアログの幅。 |
height |
ダイアログの高さ。 |
margin-left |
情報パネルダイアログの左側のマージン。中央揃えの目的で使用できます。 |
margin-top |
情報パネルダイアログの上部のマージン。中央揃えの目的で使用できます。 |
パディング |
ダイアログの内部のパディング。 |
background-color |
ダイアログの背景色。 |
border-radius |
ダイアログの境界線の半径。 |
box-shadow |
ダイアログのシャドウ。 |
例 — ビューア領域の中央に配置する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プロパティ |
説明 |
---|---|
トップ |
ダイアログの上の境界線からの位置。 |
右 |
ダイアログの右の境界線からの位置。 |
左 |
ダイアログの左の境界線からの位置。 |
下 |
ダイアログの下の境界線からの位置。 |
width |
ボタンの幅。 |
height |
ボタンの高さ。 |
background-image |
ボタンの特定の状態に対して表示する画像。 |
background-position |
CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトも参照してください。 |
このボタンでは、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);
}