画像マップの作成

画像マップは、画像、eCatalog ページまたはスピンセット内の画像の中で、テキストを含んだロールオーバーパネルが表示される領域です。ユーザーが画像マップを選択すると、何らかのアクションがトリガーされます。 例えば、製品の詳細を説明した Web ページが起動します。ユーザーがポインターを画像マップ上に移動すると、画像マップの周囲にアウトラインが表示されます。

Dynamic Media ClassicAdobeで画像マップを作成する機能に加えて、Adobe AcrobatまたはAdobe InDesignでカタログをデザインする際に画像マップを作成することもできます。

画像マップを作成する場合、次の操作を行うことができます。

• ロールオーバーテキストの入力
• Web ページを起動するための JavaScript と URL の入力
• 画像マップの URL テンプレートの作成
• 画像マップの別の画像、eCatalog ページまたはスピンセットへのコピー
• CSV または XML への画像マップの書き出し
• タブ区切りファイルまたはXMLファイルからの画像メタデータの読み込み
• World Wide Web Consortium（W3C）によって定義された他のアクションの定義
• 画像マップのプレビュー

イメージマップの描画と調整

1. 次のいずれかの操作を行います。

   • グリッドビューまたはリストビューで画像を操作している場合は、「編集」ドロップダウンリストで「画像マップ」を選択します。 または、詳細ビューで開き、画像の上にある​画像マップ​を選択します。
   • グリッドビューまたはリストビューでスピンセットを操作する場合は、「編集」を選択します。 または、詳細ビューで開き、[編集]を選択します。 画像アセットを選択し、「画像マップ」を選択します。
   • eCatalogを使用する場合は、グリッドビュー、リストビュー、詳細ビューで、編集​を選択します。 「ページをマッピング」タブを選択します。

   

2. 長方形または多角形の画像マップを描画します。

   • 長方形マップ — 長方形画像マップツールを選択し、ページ上をドラッグして長方形を作成します。長方形マップに点を追加するには（ポリゴンマップに変更するため）、[Ctrl]を押し、挿入ツールを目的の位置に配置して選択します。

   • 多角形マップ — 多角形画像マップツールを選択し、囲む画像の領域の周囲にある点を選択します。多角形の密度スライダを使用して、多角形内のポイント密度を変化させます。ほかのマップを選択した場合、元の密度は記憶されます。多角形内でポイントが追加、削除または移動されると、元の密度は失われ、スライダは最大値にリセットされます。

3. 必要に応じて、画像マップリストに、画像マップの名前を入力します。画像マップを描画した後、AdobeDynamic Media Classicは画像マップに名前を割り当てます。

   名前を作成するために、AdobeDynamic Media Classicは、操作する画像またはeCatalogページの名前に連番を追加します。 これと異なる名前を自由に指定することもできます。

4. ユーザーが画像マップを選択したときに新しいWebページを開きたい場合、画像マップリストにURLを入力します。

   詳しくは、JavaScript と URL の入力を参照してください。

5. ユーザが画像マップにポインタを合わせたときに、ロールオーバーテキストを表示する場合は、画像マップリストにそのテキストを入力します。画像マップリストで、表示​メニューを選択し、「ロールオーバーテキスト」を選択します。 次に、画面に表示するテキストを入力します。ワードプロセッサーで入力したテキストを「ロールオーバーテキスト」フィールドにコピーすることもできます。

6. 画像マップにポインタを合わせたときに別のアクション効果を実行する場合は、アクションを定義します。表示​ドロップダウンリストで、「その他のアクション」を選択します。 アクションの属性を入力します（表示 > 両方​に移動して、画像マップに対するロールオーバーテキストとアクションを作成します）。

   画像マップのその他のアクションの定義を参照してください。

7. 必要に応じて次の操作を行います。

   • 画像マップをプレビューするには、「プレビュー」を選択します。
   • イメージマップまたはポリゴン頂点を削除するには、イメージ上のシェイプを選択し、[削除]を選択します。 または、eCatalogの「ページの順序」タブで、「マップをクリア」を選択して、すべてのページから画像マップを削除します。
   • 画像マップを削除せずに一時的に画像、スピンセット内の画像または eCatalog ページから取り除くには、画像マップリストの画像マップの「オン」オプションを選択解除します。

8. 「保存」を選択します。

画像マップの位置、形状、サイズを調整する

画像マップの位置、形状、およびサイズを変更するには、画像マップボタン を選択します。次に、パン​ツールを選択し、次の手順に従います。

• 位置を変更 — ポインターを画像マップの境界線の上ではなく、近くに移動します。ポインタが 4 方向の矢印アイコンに変わったら、マップを移動先の位置にドラッグします。

• サイズと形状の変更 — 画像マップの形状とサイズを変更する方法は、長方形または多角形の画像マップを使用しているかどうかによって異なります。

• 長方形画像マップ — 画像マップの辺または角にポインターを移動します。ポインタが 2 方向の矢印アイコンに変わったら、ドラッグします。縦横比（形状）を維持しながらサイズを変更するには、Shift キーを押しながらドラッグします。

• ポリゴン画像マップ — 正方形の選択ハンドルをドラッグします。選択ハンドルを作成するには、画像マップの境界線を選択し、ドラッグを開始します。

重なり合う画像マップの処理

画像または eCatalog ページに、複数の画像マップとマップの重なり順序がある場合、マップの重なり順序を決定できます。これには、画像マップリストでマップの順序を変更します。リストでマップ名を上下にドラッグします。リスト内で名前が上にある画像マップは、下にあるほかの画像マップの上に重なります。

画像マップデータの読み込み

ページごとに画像マップデータを入力する方法もありますが、画像、スピンセットまたは eCatalog のデータをマップの概要画面で読み込むこともできます。イメージマップデータは、タブ区切りファイルまたは XML DTD 形式で読み込みます。ファイルのフィールドの並び順は、マップの概要画面の表示順と同じにする必要があります。名前、TOC ラベル、マップ、URL、ロールオーバーテキスト、その他のアクション、検索文字列の順に並ぶようにしてください。画像マップデータを読み込むと、画像マップを作成するたびにそのデータを画像マップリストで入力する手間が省けます。

画像マップデータを読み込むには:

1. 画像マップエディタページ（画像またはスピンセット内の画像の場合）または eCatalog 編集画面の「ページをマップ」タブに進みます。
2. 「メタデータを読み込み」を選択します。
3. メタデータをアップロードダイアログボックスで、「画像」または「画像マップ」を選択して、目的のアセットプロパティタイプからメタデータをアップロードします。
4. 「ファイルを生成」ドロップダウンリストで、作成するファイルの種類を選択します。
5. （オプション）「生成」を選択して、作成するファイルのタイプに基づいて結果のデータをプレビューします。 「閉じる」を選択して、メタデータをアップロードダイアログボックスに戻ります。
6. アップロードするファイルを探して選択します。「ファイル名」テキストフィールドに、生成したファイルの名前を指定します。
7. （オプション）「ジョブ名」フィールドに、メタデータアップロードジョブの名前を指定します。
8. 「アップロード」を選択します。

画像マップをコピー

画像または eCatalog ページ間で画像マップをコピーできます。画像マップをコピー​を使用して、画像マップの作成を開始します。 また、画像マップをコピーして、レイアウトやマッピング構造を共有する画像やページに再作成することもできます。

例えば、eCatalog 内の画像マップをコピーすることで、同じ eCatalog の各言語バージョン間ですべての画像マップを簡単にコピーすることができます。コピーのメリットを最大限に活かすには、ページ数が同じで、同じ画像が含まれている eCatalog 間でコピーします。コピー先のeCatalogに既に画像マップが含まれている場合、コピー時にそれらの画像マップが削除されます。

画像マップをコピーするには:

1. 画像マップエディタページ（画像またはスピンセット内の画像の場合）または eCatalog 編集画面の「ページをマップ」タブに進みます。

2. 「マップを​にコピー」を選択します。

3. 画像から画像マップをコピーするか、eCatalog から画像マップをコピーするかに基づいて、次のいずれかの操作を行います。

   • （画像）画像を選択画面で、画像マップのコピー先の画像を選択します。
   • （eCatalog）アセットを選択画面で、画像マップのコピー先の画像または eCatalog ページを選択します。

4. 「」を選択します。

テンプレートを使用したJavaScriptとURLの入力

URL テンプレート（Href テンプレート）を定義すると、画像マップの URL を簡単に、より効率的に入力できるようになります。使用する画像マップの URL のほとんどが、共通の決まった形式を共有している場合、URL テンプレートを定義することをお勧めします。固定された URL の一部を URL テンプレートとして入力することにより、画像マップを作成するたびにこの URL の部分を入力する必要がなくなります。URL テンプレートにはまた、JavaScript コマンド、パス名、およびパラメータを含めることができます。デフォルトでは、URLテンプレートには、新しいウィンドウで画像を開くloadProductという独自のAdobeDynamic Media Classic JavaScriptハンドラーが含まれています。

URL テンプレートについて

URL テンプレートは次のように、画像マップリストの「URL」列の内容をテンプレートの 2 つのドル記号（$$）に代入して使用します。

Javascript:loadProduct(‘$$’);void(0);

URLテンプレート内に、画像マップ間で変更されないすべての値を配置します。 画像マップリストの「URL」列には、共通部分以外の値のみを追加します。以下に例を挙げます。

• URLテンプレート — javascript:loadProduct(‘https://www.examplesitehere.com/$$’);void(0);
• URL値 — product.htm
• 実際に生成されたURL - javascript:loadProduct(‘https://www.examplesitehere.com/product.html);void(0);

デフォルトでは、URLテンプレートには、URLの宛先を含む新しいウィンドウを開くloadProductという独自のAdobeDynamic Media Classic JavaScriptハンドラーが含まれています。 ただし、任意のJavaScriptコードを使用してこのJavaScriptハンドラーを置き換えることも、次のAdobeのDynamic Media Classicハンドラーのいずれかを使用することもできます。

• loadProductCW — 現在のウィンドウの「URL」列で指定されたURLターゲットを表示します。このハンドラーは、主に、Web サイト内のページに統合される eCatalog に対して使用します。

• loadProductPW — 親ウィンドウ（現在のウィンドウを開いたページ）の「URL」列で指定されたURLターゲットを表示します。現在のウィンドウは開いたままですが、親ウィンドウは URL ターゲットの表示に変更されます。

  メモ

  ハンドラー loadProductPW は、DHTML および HTML5 ビューアをサポートしていません。

URLテンプレートの作成

1. マップエディター画面（画像またはスピンセットの場合）または eCatalog 画面の「ページをマップ」タブ（eCatalog の場合）で、「URL テンプレート」オプションの横の「編集」を選択します。マップテンプレートを編集ダイアログボックスが開きます。
2. JavaScriptコードと完全なURLを入力します（変数部分はドル記号[$$]に置き換えられます）。 右クリックし、「貼り付け」を選択して、コードを貼り付けることができます。
3. 「保存」を選択します。

URLテンプレートの処理

マップエディタページ（画像およびスピンセットの場合）および eCatalog 画面の「ページをマップ」タブ（eCatalog の場合）には、URL テンプレートを処理するための次のコマンドが用意されています。

• 「URLテンプレート」オプション - 「URLテンプレート」オプションを選択し、画像またはeCatalogページ上のすべての画像マップにURLテンプレートを適用します。

• テンプレートオプション — 個々の画像マップでURLテンプレートを使用しない場合は、URL画像マップリストの「テンプレート」オプションの選択を解除します。

画像マップのその他のアクションの定義

表示​メニューを選択し、「その他のアクション」を選択して、ロールオーバーテキストおよびWebページのローンチ以外のアクションをトリガー化できます。 ユーザが画像マップにポインタを合わせたときに、アクションを起動できます。このようなアクションは、World Wide Web Consortium の HTML 仕様によって、クライアント側画像マップとして定義されている属性を使用します。以下に例を示します。

• accesskey — ユーザーがキーボードの指定されたキーを押したときのアクションをトリガーします。

• onfocus — 画像マップがフォーカスを受け取ったときに、カーソル、タブ順序またはアクセスキーを押すことでイベントをトリガーします。例えば、対象の画像マップにフォーカスが移動したときに Web ページが起動し、画像マップがフォーカスを失ったときに閉じることができます。

• onblur — 画像マップがフォーカスを失ったとき（カーソルまたはタブ順）にイベントをトリガーします。

画像マップのその他のアクションを定義するには:

1. eCatalog画面(eCatalog)のマップエディタ画面（画像とスピンセット）または「ページをマップ」タブで、表示​メニューを選択し、「その他のアクション」を選択します。
2. World Wide Web Consortium の HTML 仕様によって指定されている構文を使用して、画像マップリストの「その他のアクション」列に、サポートされている属性を追加します。
3. 「保存」を選択します。

表示​メニューを選択し、画像マップにロールオーバーテキストとアクションを設定する場合は、両方​を選択します。

Adobe AcrobatまたはAdobe InDesignでの画像マップの作成

画像マップは、Adobe Acrobat や Adobe InDesign での eCatalog のデザイン中に作成できます。

Acrobat または InDesign で、画像マップを表示する位置にハイパーリンクによる参照を作成し、画像マップの URL を指定します。PDFファイルをDynamic Media Classicにアップロードする際に「リンクを抽出」オプションを選択すると、Adobeマップにリンクが自動的に変換されます。

詳しくは、 Adobe InDesignヘルプまたはAdobe Acrobatヘルプを参照してください。

Adobe InDesign で画像マップを作成するには：

1. InDesignで、Windows® > Interactive > Hyperlinks​に移動します。

2. ハイパーリンクパネルで、画像マップにするテキスト、フレームまたはグラフィックを選択します。

3. パネルメニューから「新しいハイパーリンク」を選択します。

4. [新しいハイパーリンク]ダイアログボックスの[リンク先]メニューから[URL]を選択します。

5. 「 URL 」ボックスに製品IDを入力するか貼り付けます。

6. 「OK」を選択します。 (AdobeDynamic Media Classicは、画像マップURLテンプレートを使用してURLを完成します)。

   メモ

   Adobe InDesignで外観オプションを設定する必要はありません。 外観は、Dynamic Media Classicで指定できます。Adobe

7. 作成するすべての画像マップに対して手順 2 ～ 6 を繰り返します。

8. ファイルを PDF として書き出します。

9. PDFをDynamic Media ClassicにAdobeします。

10. PDFオプション​で、「リンクを抽出」を選択します。

Adobe Acrobat で画像マップを作成するには

1. Acrobatで、ツール / 高度な編集 / リンクツール​に移動します。
2. ポインタをドラッグして画像マップを作成します。
3. 「リンクを作成」ボックスで「カスタムリンク」を選択し、「次へ」を選択します。

1. 「リンクのプロパティ」ボックスで、「アクション」を選択します。
2. 「アクションを選択」メニューから「Webリンク​を開く」を選択し、「追加」を選択します。
3. 画像マップの製品IDを「URLを編集」ボックスに入力し、「OK」を選択します。 (AdobeDynamic Media Classicは、画像マップURLテンプレートを使用してURLを完成します)。
4. 作成するすべての画像マップに対して手順 1 ～ 7 を繰り返します。
5. ファイルを保存します。
6. PDFをDynamic Media ClassicにAdobeし、PDFオプションから「リンクを抽出」を選択します。