ドキュメントDynamic Media Classic ガイド

画像マップの作成 creating-image-maps

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 中級
  • ユーザー

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

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

画像マップを作成する際は、次のいずれかの操作を行うことができます。

  • ロールオーバーテキストの入力
  • JavaScriptと、Web ページを開く URL を入力します。
  • 画像マップの URL テンプレートの作成
  • 画像マップの別の画像、eCatalog ページまたはスピンセットへのコピー
  • CSV または XML への画像マップの書き出し
  • タブ区切り形式のファイルまたは XML ファイルから画像メタデータをインポートします。
  • World Wide Web Consortium で決定されたとおりに、その他のアクションを定義します。
  • 画像マップのプレビュー

画像マップの描画と調整 drawing-and-adjusting-an-image-map

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

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

    画像マップの図

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

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

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

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

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

  4. ユーザーが画像マップを選択したときに新しい web ページを開くようにするには、画像マップ リストに URL を入力します。

    JavaScriptと URL を入力するにはを参照してください。

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

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

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

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

    • 画像マップをプレビューするには、「プレビュー」を選択します。

    • イメージ マップまたはポリゴン頂点を削除するには、イメージ上のシェイプを選択し、削除 を選択します。 または、eCatalog の場合、「ページを並べ替え」タブで「マップをクリア」を選択して、すべてのページから画像マップを削除します。

    • を削除するには：

      • 画像からの画像マップ
      • スピンセットの画像
      • または、eCatalog ページ

      一時的に、削除せずに、「画像マップ」リストから適切な「オン」オプションの選択を解除します。

  8. 保存 を選択します。

画像マップの位置、シェイプ、サイズを調整する adjusting-the-position-shape-and-size-of-image-maps

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

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

  • サイズとシェイプの変更：イメージマップのシェイプとサイズを変更する方法は、作業しているイメージマップが長方形かポリゴンかによって異なります。

TIP
画面の下部にあるサイズスライダをドラッグすると、表示を変更して、画像マップを詳細に確認することができます。

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

  • ポリゴン イメージ マップ：四角形の選択ハンドルをドラッグします。 選択ハンドルを作成するには、画像マップの境界線を選択し、ドラッグを開始します。

重なり合う画像マップを処理 handling-overlapping-image-maps

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

画像マップデータの読み込み importing-image-map-data

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

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

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

イメージ マップをコピー copying-image-maps

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

例えば、eCatalog 内で画像マップをコピーすると、同じ eCatalog の外国語バージョン間ですべての画像マップをコピーする便利な方法です。 最適な結果を得るには、同じページ数と同じ画像の eCatalog 間でコピーを行う場合に、最も効果的な方法です。 コピー先の eCatalog に既に画像マップが含まれている場合、コピーが作成されると、それらの画像マップは削除されます。

イメージ マップをコピーするには：

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

  2. マップをコピー を選択します。

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

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

  4. 選択 を選択します。

テンプレートを使用したJavaScriptと URL の入力 using-a-template-to-enter-javascript-and-urls

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

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

URL テンプレートについて about-url-templates

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 と呼ばれる独自のAdobe Dynamic Media Classic JavaScript ハンドラーが含まれています。 ただし、このJavaScript ハンドラーの代わりに任意のJavaScript コードを使用するか、次のAdobe Dynamic Media Classic ハンドラーのいずれかを使用することができます。

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

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

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

URL テンプレートの作成 creating-a-url-template

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

URL テンプレートの処理 handling-url-templates

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

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

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

画像マップのその他のアクションの定義 defining-other-actions-for-image-maps

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

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

  • onfocus: カーソル操作、タブ操作、またはアクセス キーの押下によって Image Map がフォーカスを受け取ったときにイベントをトリガーします。 例えば、画像マップがフォーカスを受け取ったら web ページを起動し、画像マップがフォーカスを失ったら閉じることができます。

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

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

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

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

Adobe AcrobatまたはAdobe InDesignでの画像マップの作成 creating-image-maps-in-adobe-acrobat-or-adobe-indesign

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

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

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

Adobe InDesign で画像マップを作成するには： to-create-image-maps-in-adobe-indesign

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

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

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

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

  5. URL ボックスに製品 ID を入力または貼り付けます。

  6. OK を選択します。 （Adobe Dynamic Media Classicは、画像マップ URL テンプレートを使用して URL を完成させます）。

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

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

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

  9. PDFをAdobe Dynamic Media Classicにアップロードします。

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

Adobe Acrobat で画像マップを作成するには to-create-image-maps-in-adobe-acrobat

  1. Adobe Acrobatで、ツール/詳細編集/リンクツール に移動します。
  2. ドラッグして画像マップを作成します。
  3. 「リンクを作成」ボックスで「カスタムリンク」を選択し、「次へ」を選択します。
NOTE
Adobe Acrobatで外観のオプションを設定する必要はありません。 Adobe Dynamic Media Classicの外観を指定できます。
  1. リンクプロパティボックスで、「アクション」を選択します。
  2. アクションを選択メニューから「Web リンクを開く」を選択し、「追加」を選択します。
  3. 「URL を編集」ボックスに画像マップの製品 ID を入力し、「OK」を選択します。 （Adobe Dynamic Media Classicは、画像マップ URL テンプレートを使用して URL を完成させます）。
  4. 作成するすべての画像マップに対して手順 1 ～ 7 を繰り返します。
  5. ファイルを保存します。
  6. PDFをAdobe Dynamic Media Classicにアップロードし、PDFオプションから「リンクを抽出」を選択します。
recommendation-more-help
ba789e76-bace-4e0e-bd26-52691fb2cb26