画像マップのサポート image-map-support

最終更新日： 2025年10月14日

作成対象：

{"id":"d378ca77-2da1-4f39-ad92-1917fe974a38"}
{"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

eCatalog Viewerでは、メインビューの上にある画像マップアイコンのレンダリングがサポートされています。

マップアイコンの表示は、画像マップエフェクトで説明されているように、CSSを使用して制御されます。

画像マップでは、外部web ページへのリダイレクト、情報パネルポップアップアクティベーション、内部ハイパーリンクの3つのアクションのいずれかを実行します。

外部web ページへのリダイレクト section-32ebe3c3a7f74892a428c5d48801de4d

画像マップのhref属性には、外部リソースへのURLが含まれています。これは、明示的に指定するか、サポートされているJavaScript テンプレート関数の1つにラップされます：loadProduct()、loadProductCW()、およびloadProductPW()。

シンプルなURL リダイレクトの例を次に示します。

href=http://www.adobe.com

この例では、同じURLがloadProduct()関数でラップされています。

href=javascript:loadProduct("http://www.adobe.com");void(0);

JavaScript コードを画像マップのHREF属性に追加すると、そのコードはクライアントのコンピューターで実行されます。したがって、JavaScript コードが安全であることを確認してください。

情報パネルを操作するには、画像マップにROLLOVER_KEY属性が設定されています。また、同時にhref属性を設定します。設定しない場合、外部URL処理によって情報パネルのポップアップアクティベーションが妨げられます。

最後に、ビューア設定にInfoPanelPopup.templateおよびオプションでInfoPanelPopup.infoServerUrl パラメーターの適切な値が含まれていることを確認します。

NOTE

情報パネルポップアップを設定すると、情報パネルに渡されたHTML コードとJavaScript コードがクライアントのコンピューターで実行されます。したがって、このようなHTML コードとJavaScript コードが安全であることを確認してください。

画像マップを選択すると、ビューア内で内部ページスワップが実行されます。この機能を使用するには、画像マップのhref属性に次の特殊な形式があります。

href=target: *idx*

ここで、*idx*は、カタログスプレッドのゼロベースインデックスです。

次に、eCatalogの3D スプレッドを指す画像マップのhref属性の例を示します。

href=target:2

recommendation-more-help

dynamic-media-developer-resources-help-aem-viewers-ref