画像マップの作成

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

Dynamic Mediaクラシックで画像マップを作成する機能に加え、Adobe AcrobatやAdobe InDesignでカタログをデザインする際にも画像マップを作成できます。

画像マップを作成する際に、次のことが可能です。

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

画像マップの描画と調整

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

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

   

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

   長方形 マップ長方形画像マップツールを選択し、ページ上をドラッグして長方形を作成します。長方形マップにポイントを追加するには（これにより多角形マップに変更する）、Ctrl キーを押し、挿入ツールを目的の位置に合わせ、クリックします。

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

3. 必要に応じて、画像マップリストに、画像マップの名前を入力します。画像マップを描画した後、Dynamic Mediaクラシックによって画像マップに名前が割り当てられます。

   この名前を作成するために、操作対象の画像または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という独自仕様のDynamic MediaクラシックJavaScriptハンドラが含まれています。

URL テンプレートについて

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

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

URL テンプレートには、すべての画像マップに共通の値をすべて指定します。画像マップリストの「URL」列には、共通部分以外の値のみを追加します。例：

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

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

• loadProductCW

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

• loadProductPW

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

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

URL テンプレートの作成

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クラシックにアップロードする際に「リンクを抽出」オプションを選択すると、リンクが画像マップに自動的に変換されます。

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

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

1. InDesign でウィンドウ／インタラクティブ／ハイパーリンクをクリックし、ハイパーリンクパネルを開きます。

2. 画像マップに含めるテキスト、フレームまたはグラフィックを選択します。

3. ハイパーリンクパネルで、パネルメニューから「新規ハイパーリンク」をクリックします。

4. 新規ハイパーリンクダイアログボックスで、リンク先ポップアップメニューから「URL」を選択します。

5. 製品 ID を「URL」ボックスに入力するか貼り付け、「OK」をクリックします(Dynamic Mediaクラシックは、画像マップURLテンプレートを使用してURLを完成します)。

   メモ

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

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

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

8. PDFをDynamic Mediaクラシックにアップロードし、「PDFオプション」で「リンクを抽出」を選択します。

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

1. Acrobat でツール／高度な編集／リンクツールを選択します。

2. ポインタをドラッグして画像マップを作成します。リンクの作成ダイアログボックスが開きます。

3. 「カスタムリンク」を選択し、「次へ」をクリックします。

   注意​:Acrobatで外観のオプションを設定する必要はありません。外観は、Dynamic Mediaクラシックで指定できます。

4. リンクのプロパティダイアログボックスで、「アクション」をクリックします。

5. アクションを選択メニューから「Web リンクを開く」を選択し、「追加」をクリックします。

6. 「URL を編集」ダイアログボックスで画像マップの製品 ID を入力し、「OK」をクリックます(Dynamic Mediaクラシックは、画像マップURLテンプレートを使用してURLを完成します)。

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

8. ファイルを保存します。

9. PDFをDynamic Mediaクラシックにアップロードし、「PDFオプション」で「リンクを抽出」を選択します。