画像マップは、画像、eCatalog ページまたはスピンセット内の画像の中で、テキストを含んだロールオーバーパネルが表示される領域です。ユーザーが画像マップを選択すると、何らかのアクションがトリガーされます。 例えば、製品の詳細を説明した Web ページが起動します。ユーザがポインタを画像マップ上に移動すると、画像マップの周囲にアウトラインが表示されます。
Adobe Dynamic Media Classicで画像マップを作成する機能に加えて、Adobe AcrobatまたはAdobe InDesignでカタログをデザインする際に、画像マップを作成することもできます。
画像マップを作成する際に、次の操作を行うことができます。
次のいずれかの操作を行います。
長方形または多角形の画像マップを描画します。
長方形マップ — 長方形画像マップツールを選択し、ページ上にドラッグして長方形を作成します。 長方形のマップにポイントを追加する(ポリゴンマップに変更する)には、[Ctrl] を押し、挿入ツールを目的の場所に配置して、を選択します。
ポリゴンマップ — 多角形画像マップツールを選択し、囲む画像の領域の周囲の点を選択します。 多角形の密度スライダを使用して、多角形内のポイント密度を変化させます。ほかのマップを選択した場合、元の密度は記憶されます。多角形内でポイントが追加、削除または移動されると、元の密度は失われ、スライダは最大値にリセットされます。
必要に応じて、画像マップリストに、画像マップの名前を入力します。画像マップを描画した後、Adobe Dynamic Media Classicによって画像マップに名前が割り当てられます。
名前を作成するために、Adobe Dynamic Media Classicは、操作している画像または eCatalog ページの名前に連続した番号を追加します。 これと異なる名前を自由に指定することもできます。
ユーザーが画像マップを選択したときに新しい Web ページを開きたい場合、画像マップリストに URL を入力します。
詳しくは、JavaScript と URL の入力を参照してください。
ユーザが画像マップにポインタを合わせたときに、ロールオーバーテキストを表示する場合は、画像マップリストにそのテキストを入力します。画像マップリストで、 表示 メニューと選択 ロールオーバーテキスト. 次に、ユーザーに画面に表示するテキストを入力します。 ワードプロセッサーで入力したテキストを「ロールオーバーテキスト」フィールドにコピーすることもできます。
画像マップにポインタを合わせたときに別のアクション効果を実行する場合は、アクションを定義します。内 表示 ドロップダウンリストで、「 その他のアクション. アクションの属性を入力します( に移動します。 表示 > 両方 :画像マップのロールオーバーテキストとアクションを作成する場合 )。
詳しくは、 画像マップのその他のアクションの定義.
必要に応じて次の操作を行います。
選択 保存.
画像マップの位置、形状、およびサイズを変更するには、画像マップボタン を選択します。次に、 パン ツールを使用して、次の手順に従います。
位置を変更 — ポインターを、画像マップの境界線の上ではなく、近くに移動します。 ポインタが 4 方向の矢印アイコンに変わったら、マップを移動先の位置にドラッグします。
サイズと形状の変更 — 画像マップの形状とサイズを変更する方法は、長方形または多角形の画像マップを使用しているかどうかによって異なります。
画面の下部にあるサイズスライダをドラッグすると、表示を変更して、画像マップを詳細に確認することができます。
長方形画像マップ — 画像マップの端または角にポインターを移動します。 ポインタが 2 方向の矢印アイコンに変わったら、ドラッグします。縦横比(形状)を維持しながらサイズを変更するには、Shift キーを押しながらドラッグします。
多角形の画像マップ — 四角形の選択ハンドルをドラッグします。 選択ハンドルを作成するには、画像マップの境界線を選択し、ドラッグを開始します。
画像または eCatalog ページに、複数の画像マップとマップの重なり順序がある場合、マップの重なり順序を決定できます。これには、画像マップリストでマップの順序を変更します。リストでマップ名を上下にドラッグします。リスト内で名前が上にある画像マップは、下にあるほかの画像マップの上に重なります。
ページごとに画像マップデータを入力する方法もありますが、画像、スピンセットまたは eCatalog のデータをマップの概要画面で読み込むこともできます。イメージマップデータは、タブ区切りファイルまたは XML DTD 形式で読み込みます。ファイルのフィールドの並び順は、マップの概要画面の表示順と同じにする必要があります。名前、TOC ラベル、マップ、URL、ロールオーバーテキスト、その他のアクション、検索文字列の順に並ぶようにしてください。画像マップデータを読み込むと、画像マップを作成するたびにそのデータを画像マップリストで入力する手間が省けます。
画像マップデータを読み込むには:
画像または eCatalog ページ間で画像マップをコピーできます。用途 画像マップをコピー 頭を使って作り始めるのです また、画像マップをコピーして、レイアウトやマッピング構造を共有する画像やページで再作成することもできます。
例えば、eCatalog 内の画像マップをコピーすることで、同じ eCatalog の各言語バージョン間ですべての画像マップを簡単にコピーすることができます。コピーのメリットを最大限に活かすには、ページ数が同じで、同じ画像が含まれている eCatalog 間でコピーします。コピー先の eCatalog に既に画像マップが含まれている場合、コピー時にそれらの画像マップは削除されます。
画像マップをコピーするには:
画像マップエディタページ(画像またはスピンセット内の画像の場合)または eCatalog 編集画面の「ページをマップ」タブに進みます。
選択 マップのコピー先.
画像から画像マップをコピーするか、eCatalog から画像マップをコピーするかに基づいて、次のいずれかの操作を行います。
選択 選択.
URL テンプレート(Href テンプレート)を定義すると、画像マップの URL を簡単に、より効率的に入力できるようになります。使用する画像マップの URL のほとんどが、共通の決まった形式を共有している場合、URL テンプレートを定義することをお勧めします。固定された URL の一部を URL テンプレートとして入力することにより、画像マップを作成するたびにこの URL の部分を入力する必要がなくなります。URL テンプレートにはまた、JavaScript コマンド、パス名、およびパラメータを含めることができます。デフォルトでは、この URL テンプレートには、という独自のAdobe Dynamic Media Classic JavaScript ハンドラーが含まれています。 loadProduct
新しいウィンドウで画像が開きます。
JavaScript コードを画像マップの HREF 属性に追加すると、そのコードはクライアントのコンピューターで実行されます。 そのため、JavaScript コードが安全であることを確認してください。
URL テンプレートは次のように、画像マップリストの「URL」列の内容をテンプレートの 2 つのドル記号($$)に代入して使用します。
Javascript:loadProduct(‘$$’);void(0);
URL テンプレート内の画像マップ間で変更されないすべての値を配置します。 画像マップリストの「URL」列には、共通部分以外の値のみを追加します。以下に例を挙げます。
javascript:loadProduct(‘https://www.examplesitehere.com/$$’);void(0);
product.htm
javascript:loadProduct(‘https://www.examplesitehere.com/product.html);void(0);
デフォルトでは、この URL テンプレートには、と呼ばれる独自のAdobe Dynamic Media Classic JavaScript ハンドラーが含まれています。 loadProduct
URL の宛先を含む新しいウィンドウが開きます。 ただし、任意の JavaScript コードを使用してこの JavaScript ハンドラーを置き換えることも、次のAdobe Dynamic Media Classicハンドラーのいずれかを使用することもできます。
loadProductCW
— 現在のウィンドウの「URL」列で指定された URL ターゲットを表示します。 このハンドラーは、主に、Web サイト内のページに統合される eCatalog に対して使用します。
loadProductPW
— 親ウィンドウ(現在のウィンドウを開いたページ)の「URL」列で指定された URL ターゲットを表示します。 現在のウィンドウは開いたままですが、親ウィンドウは URL ターゲットの表示に変更されます。
ハンドラー loadProductPW
は、DHTML および HTML5 ビューアをサポートしていません。
マップエディタページ(画像およびスピンセットの場合)および eCatalog 画面の「ページをマップ」タブ(eCatalog の場合)には、URL テンプレートを処理するための次のコマンドが用意されています。
URL テンプレートオプション - 「URL テンプレート」オプションを選択して、画像または eCatalog ページ上のすべての画像マップに URL テンプレートを適用します。
テンプレートオプション — 個々の画像マップで URL テンプレートを使用しない場合は、URL 画像マップリストの「テンプレート」オプションの選択を解除します。
次の項目を選択できます。 表示 メニューと選択 その他のアクション :ロールオーバーテキストと web ページの起動以外のトリガーアクション。 ユーザが画像マップにポインタを合わせたときに、アクションを起動できます。このようなアクションは、World Wide Web Consortium の HTML 仕様によって、クライアント側画像マップとして定義されている属性を使用します。以下に例を示します。
accesskey
— ユーザーがキーボードの指定されたキーを押したときのアクションをトリガーします。
onfocus
— 画像マップがフォーカスを受け取ったときに、カーソル、タブキー、またはアクセスキーを押してイベントをトリガーします。 例えば、対象の画像マップにフォーカスが移動したときに Web ページが起動し、画像マップがフォーカスを失ったときに閉じることができます。
onblur
— 画像マップがカーソルまたはタブによってフォーカスを失ったときのイベントをトリガーします。
画像マップのその他のアクションを定義するには:
を選択します。 表示 メニューと選択 両方 画像マップにロールオーバーテキストとアクションを設定する場合。
画像マップは、Adobe Acrobat や Adobe InDesign での eCatalog のデザイン中に作成できます。
Adobe AcrobatまたはAdobe InDesignで、画像マップを表示する場所にハイパーリンク参照を作成し、画像マップの URL の場所を指定します。 PDFファイルをAdobe Dynamic Media Classicにアップロードする際に「リンクを抽出」オプションを選択すると、リンクが画像マップに自動的に変換されます。
詳しくは、「 Adobe InDesignヘルプ」または「 Adobe Acrobatヘルプ」を参照してください。
Adobe InDesignで、に移動します。 Windows® > インタラクティブ > ハイパーリンク.
ハイパーリンクパネルで、画像マップに追加するテキスト、枠、またはグラフィックを選択します。
選択 新しいハイパーリンク を選択します。
[ 新しいハイパーリンク ] ダイアログボックスで、 リンク先 メニュー、選択 URL.
「 URL 」ボックスに製品 ID を入力するか貼り付けます。
選択 OK. (Adobe Dynamic Media Classicは、画像マップ URL テンプレートを使用して URL を完成します )。
Adobe InDesignで外観オプションを設定する必要はありません。 外観はAdobe Dynamic Media Classicで指定できます。
作成するすべての画像マップに対して手順 2 ~ 6 を繰り返します。
ファイルを PDF として書き出します。
Adobe Dynamic Media ClassicにPDFをアップロードします。
In PDFオプションを選択します。 リンクを抽出.
Adobe Acrobatで外観オプションを設定する必要はありません。 外観はAdobe Dynamic Media Classicで指定できます。