情報パネルポップアップ

情報パネルポップアップは、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); 
}

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now