画像マップは、画像、eCatalog ページまたはスピンセット内の画像の中で、テキストを含んだロールオーバーパネルが表示される領域です。ユーザが画像マップをクリックすると、何らかのアクションがトリガされます。例えば、製品の詳細を説明した Web ページが起動します。ユーザがポインタを画像マップに合わせると、画像マップの存在を示すアウトラインが画像マップの周囲に表示されます。
Dynamic Mediaクラシックで画像マップを作成する機能に加え、Adobe AcrobatやAdobe InDesignでカタログをデザインする際にも画像マップを作成できます。
画像マップを作成する際に、次のことが可能です。
次のいずれかの操作を行います。
長方形または多角形の画像マップを描画します。
長方形 マップ長方形画像マップツールを選択し、ページ上をドラッグして長方形を作成します。長方形マップにポイントを追加するには(これにより多角形マップに変更する)、Ctrl キーを押し、挿入ツールを目的の位置に合わせ、クリックします。
多角形の マップ多角形の画像マップツールを選択し、囲む画像領域の枠上の点をクリックします。多角形の密度スライダを使用して、多角形内のポイント密度を変化させます。ほかのマップを選択した場合、元の密度は記憶されます。多角形内でポイントが追加、削除または移動されると、元の密度は失われ、スライダは最大値にリセットされます。
必要に応じて、画像マップリストに、画像マップの名前を入力します。画像マップを描画した後、Dynamic Mediaクラシックによって画像マップに名前が割り当てられます。
この名前を作成するために、操作対象の画像または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テンプレートには、新しいウィンドウで画像を開くloadProduct
という独自仕様のDynamic MediaクラシックJavaScriptハンドラが含まれています。
JavaScript コードを画像マップの HREF 属性に追加した場合、そのコードはクライアントのコンピューターで実行されます。そのため、JavaScript コードが安全であることを確認してください。
URL テンプレートは次のように、画像マップリストの「URL」列の内容をテンプレートの 2 つのドル記号($$)に代入して使用します。
Javascript:loadProduct(‘$$’);void(0);
URL テンプレートには、すべての画像マップに共通の値をすべて指定します。画像マップリストの「URL」列には、共通部分以外の値のみを追加します。例:
avascript:loadProduct(‘https://www.examplesitehere.com/$$’);void(0);
product.htm
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 テンプレートを作成するには:
マップエディタページ(画像およびスピンセットの場合)および eCatalog 画面の「ページをマップ」タブ(eCatalog の場合)には、URL テンプレートを処理するための次のコマンドが用意されています。
「URLテンプレート」 オプション「URLテンプレート」オプションを選択して、画像またはeCatalogページ上のすべての画像マップにURLテンプレートを適用します。
テンプレート オプションURLテンプレートを使用しない画像マップを個別に作成する場合は、URL画像マップリストで「テンプレート」オプションの選択を解除します。
表示メニューの「その他のアクション」を選択して、ロールオーバーテキストや Web ページ起動以外のアクションをトリガできます。ユーザが画像マップにポインタを合わせたときに、アクションを起動できます。このようなアクションは、World Wide Web Consortium の HTML 仕様によって、クライアント側画像マップとして定義されている属性を使用します。以下に例を示します。
accesskeyユーザーがキーボードの指定されたキーを押すと、アクションがトリガーされます。
onfocusイベントは、画像マップにフォーカスが移動したとき(カーソル、タブ順序、またはアクセスキーが押されたとき)にトリガされます。例えば、対象の画像マップにフォーカスが移動したときに Web ページが起動し、画像マップがフォーカスを失ったときに閉じることができます。
onblurカーソルまたはタブ順序によってイベントマップのフォーカスが失われた場合に、画像がトリガーされます。
画像マップのその他のアクションを定義するには
画像マップに、ロールオーバーテキストとアクションの両方を設定する場合は、表示メニューの「両方」を選択します。
画像マップは、Adobe Acrobat や Adobe InDesign での eCatalog のデザイン中に作成できます。
Acrobat または InDesign で、画像マップを表示する位置にハイパーリンクによる参照を作成し、画像マップの URL を指定します。PDFファイルをDynamic Mediaクラシックにアップロードする際に「リンクを抽出」オプションを選択すると、リンクが画像マップに自動的に変換されます。
詳しくは、InDesign または Acrobat のヘルプを参照してください。
InDesign でウィンドウ/インタラクティブ/ハイパーリンクをクリックし、ハイパーリンクパネルを開きます。
画像マップに含めるテキスト、フレームまたはグラフィックを選択します。
ハイパーリンクパネルで、パネルメニューから「新規ハイパーリンク」をクリックします。
新規ハイパーリンクダイアログボックスで、リンク先ポップアップメニューから「URL」を選択します。
製品 ID を「URL」ボックスに入力するか貼り付け、「OK」をクリックします(Dynamic Mediaクラシックは、画像マップURLテンプレートを使用してURLを完成します)。
InDesign で外観のオプションを設定する必要はありません。外観は、Dynamic Mediaクラシックで指定できます。
作成するすべての画像マップに対して手順 2 ~ 5 を繰り返します。
ファイルを PDF として書き出します。
PDFをDynamic Mediaクラシックにアップロードし、「PDFオプション」で「リンクを抽出」を選択します。
Acrobat でツール/高度な編集/リンクツールを選択します。
ポインタをドラッグして画像マップを作成します。リンクの作成ダイアログボックスが開きます。
「カスタムリンク」を選択し、「次へ」をクリックします。
注意:Acrobatで外観のオプションを設定する必要はありません。外観は、Dynamic Mediaクラシックで指定できます。
リンクのプロパティダイアログボックスで、「アクション」をクリックします。
アクションを選択メニューから「Web リンクを開く」を選択し、「追加」をクリックします。
「URL を編集」ダイアログボックスで画像マップの製品 ID を入力し、「OK」をクリックます(Dynamic Mediaクラシックは、画像マップURLテンプレートを使用してURLを完成します)。
作成するすべての画像マップに対して手順 1 ~ 7 を繰り返します。
ファイルを保存します。
PDFをDynamic Mediaクラシックにアップロードし、「PDFオプション」で「リンクを抽出」を選択します。