画像マップの作成 creating-image-maps
画像マップは、画像上の領域、e カタログページ、またはSpinSet内の画像で、テキスト付きのロールオーバーパネルを表示します。 ユーザーが画像マップを選択すると、何らかのアクションがトリガーされます。 例えば、ユーザーが製品について詳しく知ることができるように、Web ページが起動されます。 ユーザーが画像マップの上にポインターを移動すると、画像マップの周囲にアウトラインが表示されます。
Adobe Dynamic Media Classicで画像マップを作成する機能に加えて、Adobe AcrobatまたはAdobe InDesignでカタログをデザインするときに画像マップを作成することもできます。
画像マップを作成する場合は、次のいずれかの操作を行うことができます。
- ロールオーバーテキストの入力
- Web ページを起動するためのJavaScriptとURLを入力します。
- 画像マップの URL テンプレートの作成
- 画像マップの別の画像、eCatalog ページまたはスピンセットへのコピー
- CSV または XML への画像マップの書き出し
- タブ区切りファイルまたはXML ファイルから画像メタデータを読み込みます。
- World Wide Web Consortiumによって決定されるその他のアクションを定義します。
- 画像マップのプレビュー
画像マップの描画と調整 drawing-and-adjusting-an-image-map
-
次のいずれかの操作を行います。
- グリッド表示またはリスト表示で画像を操作している場合は、「編集」ドロップダウンリストで「画像マップ」を選択します。 または、詳細ビューで開き、画像の上にある 画像マップ を選択します。
- グリッドビューまたはリストビューでスピンセットを操作している場合は、編集を選択します。 または、詳細ビューで開き、編集を選択します。 画像アセットを選択し、画像マップを選択します。
- eCatalogで作業している場合は、「グリッド表示」、「リスト表示」、「詳細表示」で「編集」を選択します。 「ページをマップ」タブを選択します。
-
長方形または多角形の画像マップを描画します。
-
長方形マップ：長方形画像マップツールを選択し、ページ上でドラッグして長方形を作成します。 長方形マップにポイントを追加するには（したがってポリゴンマップに変更する）、Ctrl キーを押してから、挿入ツールを目的の場所に配置して選択します。
-
多角形マップ：多角形の画像マップツールを選択し、囲む画像の領域の周囲にあるポイントを選択します。 多角形の密度スライダを使用して、多角形内のポイント密度を変化させます。 ほかのマップを選択した場合、元の密度は記憶されます。 ポリゴン内の任意のポイントが追加、削除、または移動されると、元の密度は失われます。 スライダーが最大値にリセットされます。
-
-
必要に応じて、画像マップリストに、画像マップの名前を入力します。 画像マップを描画すると、Adobe Dynamic Media Classicによって名前が割り当てられます。
名前を作成するために、Adobe Dynamic Media Classicは、操作している画像またはe カタログページの名前に連続番号を追加します。 これと異なる名前を自由に指定することもできます。
-
ユーザーが画像マップを選択したときに新しいWeb ページを開く場合は、画像マップリストにURLを入力します。
JavaScriptとURLを入力するには、を参照してください。
-
ユーザが画像マップにポインタを合わせたときに、ロールオーバーテキストを表示する場合は、画像マップリストにそのテキストを入力します。 画像マップリストで、表示 メニューを選択し、繰り越しテキストを選択します。 次に、ユーザーに画面に表示させるテキストを入力します。 ワードプロセッサーで入力したテキストを「ロールオーバーテキスト」フィールドにコピーすることもできます。
-
画像マップにポインタを合わせたときに別のアクション効果を実行する場合は、アクションを定義します。 表示 ドロップダウンリストで、その他のアクションを選択します。 アクションの属性を入力します （表示 > 両方に移動して、ロールオーバーテキストと画像マップのアクションを作成します）。
画像マップ 🔗に対する他のアクションの定義を参照してください。
-
必要に応じて次の操作を行います。
-
画像マップをプレビューするには、プレビューを選択します。
-
画像マップまたは多角形の頂点を削除するには、画像上のシェイプを選択し、削除を選択します。 または、eCatalogの場合、「注文ページ」タブで「マップをクリア」を選択して、すべてのページから画像マップを削除します。
-
を削除するには：
- 画像からの画像マップ
- スピンセット内の画像
- eCatalog ページなどで使用できます
一時的に、削除せずに、画像マップリストの適切な「オン」オプションの選択を解除します。
-
-
保存を選択します。
画像マップの位置、形状、サイズを調整する adjusting-the-position-shape-and-size-of-image-maps
画像マップの位置、形状、サイズを変更するには、「画像マップ」ボタンを選択します。 次に、パン ツールを選択し、次の手順に従います。
-
位置を変更: ポインターを画像マップの境界線の近くに移動しますが、境界線の上には移動しません。 ポインタが 4 方向の矢印アイコンに変わったら、マップを移動先の位置にドラッグします。
-
サイズとシェイプを変更：画像マップのシェイプとサイズを変更する方法は、長方形または多角形の画像マップを使用しているかどうかによって異なります。
-
長方形の画像マップ：画像マップの側面または隅にポインターを移動します。 ポインタが 2 方向の矢印アイコンに変わったら、ドラッグします。 Shift キーを押しながらドラッグすると、サイズは変更されますが、縦横比（シェイプ）は維持されます。
-
多角形画像マップ：正方形の選択ハンドルをドラッグします。 選択ハンドルを作成するには、画像マップの境界線を選択し、ドラッグを開始します。
重複する画像マップの処理 handling-overlapping-image-maps
画像またはeCatalog ページに複数の画像マップが含まれ、マップが重なっている場合は、マップの重なり方を指定できます。 これには、画像マップリストでマップの順序を変更します。 リストでマップ名を上下にドラッグします。 リスト内で名前が上にある画像マップは、下にあるほかの画像マップの上に重なります。
画像マップデータの読み込み importing-image-map-data
ページごとに画像マップデータを入力する方法もありますが、画像、スピンセットまたは eCatalog のデータをマップの概要画面で読み込むこともできます。 イメージマップデータは、タブ区切りファイルまたは XML DTD 形式で読み込みます。 ファイルのフィールドの並び順は、マップの概要画面の表示順と同じにする必要があります。名前、TOC ラベル、マップ、URL、ロールオーバーテキスト、その他のアクション、検索文字列の順に並ぶようにしてください。 画像マップデータを読み込むと、各画像マップを作成する際に、画像マップリストにデータを入力する手間が軽減されます。
画像マップデータを読み込むには：
- 画像マップエディタページ（画像またはスピンセット内の画像の場合）または eCatalog 編集画面の「ページをマップ」タブに進みます。
- 「メタデータを読み込み」を選択します。
- メタデータをアップロードダイアログボックスで、「画像」または「画像マップ」を選択して、目的のアセットプロパティタイプからメタデータをアップロードします。
Generate Fileドロップダウンリストで、作成するファイルのタイプを選択します。- （オプション）作成するファイルのタイプに基づいて結果のデータをプレビューするには、生成を選択します。 「閉じる」を選択して、メタデータをアップロードダイアログボックスに戻ります。
- アップロードするファイルを探して選択します。 「ファイル名」テキストフィールドに、生成したファイルの名前を指定します。
- （オプション）「ジョブ名」フィールドに、メタデータアップロードジョブの名前を指定します。
- 「アップロード」を選択します。
画像マップをコピー copying-image-maps
画像または eCatalog ページ間で画像マップをコピーできます。 画像マップのコピーを使用して、画像マップの作成を開始します。 画像マップをコピーして、レイアウトやマッピング構造を共有する画像やページで再作成することもできます。
例えば、eCatalogで画像マップをコピーすると、同じeCatalogの外国語バージョン間で画像マップをすべてコピーするのに便利です。 最適な結果を得るには、同じページ数と同じ画像を持つeCatalog間でコピーを行うと、コピーが最も成功します。 コピー先のeCatalogに既に画像マップが含まれている場合、コピーが作成されると、それらの画像マップは削除されます。
画像マップをコピーするには：
-
画像マップエディタページ（画像またはスピンセット内の画像の場合）または eCatalog 編集画面の「ページをマップ」タブに進みます。
-
「マップをにコピー」を選択します。
-
画像から画像マップをコピーするか、eCatalog から画像マップをコピーするかに基づいて、次のいずれかの操作を行います。
- （画像）画像を選択画面で、画像マップのコピー先の画像を選択します。
- （eCatalog）アセットを選択画面で、画像マップのコピー先の画像または eCatalog ページを選択します。
-
Selectを選択します。
テンプレートを使用して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 ハンドラーが含まれており、新しいウィンドウで画像が開きます。
URL テンプレートについて about-url-templates
URL テンプレートは、画像マップリストのURL列の内容を置き換えることで機能します。 テンプレートのダブル ドル記号（‘$$’）に置き換えます。
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 ハンドラー loadProductPWはDHTML ビューアとHTML5 ビューアをサポートしていません。
URL テンプレートの作成 creating-a-url-template
- マップエディター画面（画像またはスピンセット）またはeCatalog画面（eCatalogs）の「ページをマップ」タブで、「URL テンプレート」オプションの横にある「編集」を選択します。 マップテンプレートを編集ダイアログボックスが開きます。
- JavaScript コードと完全なURLを入力します（変数部分はドル記号[$$]に置き換えられます）。 コードを貼り付けるには、右クリックして「貼り付け」を選択します。
- 保存を選択します。
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：画像マップがフォーカスを受け取ったときに、カーソル、タブ、またはアクセスキーを押してイベントをトリガーします。 例えば、画像マップがフォーカスを受け取ったときにWeb ページを起動し、画像マップがフォーカスを失ったときに閉じることができます。 -
onblur：画像マップがフォーカスを失ったときに、カーソルまたはタブによってイベントをトリガーします。
画像マップの他のアクションを定義するには：
- マップエディター画面（画像とスピンセット）またはeCatalog画面（eCatalogs）の「マップページ」タブで、表示 メニューを選択し、その他のアクションを選択します。
- World Wide Web Consortium の HTML 仕様によって指定されている構文を使用して、画像マップリストの「その他のアクション」列に、サポートされている属性を追加します。
- 保存を選択します。
画像マップにロールオーバーテキストとアクションを含める場合は、表示 メニューを選択し、両方を選択します。
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にアップロードする際に、「リンクを抽出」オプションを選択すると、リンクが自動的にImage Mapsに変換されます。
詳しくは、Adobe InDesign ヘルプまたはAdobe Acrobat ヘルプを参照してください。
Adobe InDesign で画像マップを作成するには： to-create-image-maps-in-adobe-indesign
-
Adobe InDesignで、Windows® > インタラクティブ > ハイパーリンクに移動します。
-
ハイパーリンクパネルで、画像マップにするテキスト、フレーム、グラフィックを選択します。
-
パネルメニューから「新規ハイパーリンク」を選択します。
-
新規ハイパーリンクダイアログボックスのリンク先 メニューから、URLを選択します。
-
「URL」ボックスに製品IDを入力するか貼り付けます。
-
OKを選択します。 （Adobe Dynamic Media Classicは、画像マップ URL テンプレートを使用してURLを補完します）。
note NOTE Adobe InDesignで外観オプションを設定する必要はありません。 Adobe Dynamic Media Classicでアピアランスを指定できます。 -
作成するすべての画像マップについて、手順2 ～ 6を繰り返します。
-
ファイルを PDF として書き出します。
-
PDFをAdobe Dynamic Media Classicにアップロードします。
-
PDF オプションで、リンクを抽出を選択します。
Adobe Acrobat で画像マップを作成するには to-create-image-maps-in-adobe-acrobat
- Adobe Acrobatで、ツール > 詳細編集 > リンクツールに移動します。
- ポインタをドラッグして画像マップを作成します。
- リンクを作成ボックスで、カスタムリンクを選択し、次へを選択します。
- 「リンクのプロパティ」ボックスで、「アクション」を選択します。
- 「アクションを選択」メニューから「Web リンクを開く」を選択し、「追加」を選択します。
- 「URLを編集」ボックスに画像マップの製品IDを入力し、OKを選択します。 （Adobe Dynamic Media Classicは、画像マップ URL テンプレートを使用してURLを補完します）。
- 作成するすべての画像マップに対して手順 1 ～ 7 を繰り返します。
- ファイルを保存します。
- PDFをAdobe Dynamic Media Classicにアップロードし、「PDF オプション」から「リンクを抽出」を選択します。