マニュアルキャンセル

イメージマップ

検索

最終更新日 : 2021年4月28日

Dreamweaver でイメージマップを使用して、Web サイトのインタラクティブホットスポットを作成する方法について説明します.

イメージマップとは、ホットスポットと呼ばれる領域に分割されたイメージのことです。ホットスポットをクリックすると、新しいファイルが開くなどのアクションが実行されます。

クライアントサイドのイメージマップでは、ハイパーテキストリンク情報は HTML ドキュメントに保存されます。これは、ハイバーテキストリンク情報が別個のマップファイルに保存されるサーバーサイドのイメージマップの場合とは異なります。サイトビジターがイメージのホットスポットをクリックすると、関連付けられた URL が直接サーバーに送られます。クライアントサイドのイメージマップは、サーバーがクリック箇所を解釈しなくてもすむので、サーバーサイドのイメージマップよりも高速に処理されます。

Dreamweaver では、既存のドキュメント内のサーバーサイドのイメージマップへの参照は変更されません。したがって、同じドキュメント内で、クライアントサイドのイメージマップとサーバーサイドのイメージマップの両方を使用することができます。両タイプのイメージマップをサポートするブラウザーでは、クライアントサイドのイメージマップが優先的に使用されます。サーバーサイドのイメージマップをドキュメントに組み込むには、適切な HTML コードを記述する必要があります。

クライアントサイドのイメージマップの挿入

クライアントサイドのイメージマップを挿入するときは、ホットスポット領域を作成してから、ホットスポット領域をクリックしたときに開くリンクを定義します。

注意：

ホットスポット領域は複数作成できますが、それらは同じイメージマップの一部です。

ドキュメントウィンドウで、イメージを選択します。
プロパティインスペクターの右下隅にある縮小の三角形をクリックして、すべてのプロパティを表示します。
「マップ」フィールドに、イメージマップの一意の名前を入力します。1 つのドキュメント内で複数のイメージマップを使っている場合、それぞれのマップに異なる名前を付けてください。
イメージマップ領域を定義するには、以下のいずれかの操作を行います。
- 円形ツールを選択し、ポインターをイメージ上にドラッグして、円形のホットスポットを作成します。
- 長方形ツールを選択し、ポインターをイメージ上にドラッグして、長方形のホットスポットを作成します。
- 多角形ツールを選択し、頂点を 1 回ずつクリックして、不規則な形状のホットスポットを定義します。矢印ツールをクリックし、形状を確定します。
  ホットスポットを作成すると、ホットスポットのプロパティインスペクターが表示されます。
「リンク」フィールドで、フォルダーアイコンをクリックし、ホットスポットがクリックされたときに開くファイルを選択するか、ファイルのパスを入力します。
ターゲットドロップダウンリストから、ファイルを開くウィンドウを選択するか、ウィンドウの名前を入力します。

現在のドキュメントで指定したすべてのフレームの名前がポップアップリストに表示されます。存在しないフレームを指定した場合、リンクされたページは、指定した名前の新規ウィンドウにロードされます。以下のターゲット名を選ぶこともできます。
- _blank は、リンクされたファイルを新規のブラウザーウィンドウにロードします。
- _parent は、リンクされたファイルを、リンクが含まれている親フレームセットまたはフレームのウィンドウにロードします。リンクを含むフレームがネストされていない場合は、リンクされているファイルは、ブラウザーウィンドウ全体にロードします。
- _self は、リンクされたファイルを、リンクと同じフレームまたはウィンドウにロードします。このターゲットは初期設定なので、通常は指定する必要はありません。
- _top は、リンクされたファイルをブラウザーウィンドウ全体にロードして、すべてのフレームを削除します。
- _new は、リンクされたファイルを新規のブラウザーウィンドウにロードします。
注意：

このターゲットオプションは、選択したホットスポットにリンクが含まれていない場合は使用できません。
「代替」ボックスに、テキスト専用ブラウザー、またはイメージを手動でダウンロードするよう設定されたブラウザーに表示する代替テキストを入力します。ブラウザーによっては、ユーザーがマウスポインターをホットスポット上に置いたときに、このテキストがツールヒントとして表示されます。
イメージマップに追加のホットスポットを定義するには、手順 4 ～ 7 を繰り返します。
イメージのマッピングを終了したら、ドキュメントの空白の領域をクリックし、プロパティインスペクターの表示内容を切り替えます。

イメージマップのホットスポットの修正

イメージマップ内に作成したホットスポットは簡単に編集できます。ホットスポット領域の移動、ホットスポットのサイズ変更や絶対位置のエレメント（AP エレメント）の前面/背面への移動などを行うことができます。

ホットスポットを含むイメージを他のドキュメントにコピーしたり、あるイメージから別のイメージにホットスポット（複数可）をコピー＆ペーストしたりできます。イメージに関連付けられたホットスポットを、新規ドキュメントにコピーすることもできます。

イメージマップでの複数のホットスポットの選択

ポインターホットスポットツールを使用してホットスポットを選択します。
次のいずれかの操作を実行します。
- 目的のホットスポットを Shift キーを押しながらクリックします。
- すべてのホットスポットを選択するには、Ctrl + A キー（Windows）または Command + A キー（Mac OS）を押します。

ホットスポットの移動

ポインターホットスポットツールを使用してホットスポットを選択します。
次のいずれかの操作を実行します。
- 新しい位置にホットスポットをドラッグして移動します。
- Ctrl + 矢印キーを押すと、目的の方向へ 10 ピクセルずつホットスポットを移動できます。
- 矢印キーを押すと、目的の方向へ 1 ピクセルずつホットスポットを移動することができます。

ホットスポットのサイズ変更

ポインターホットスポットツールを使用してホットスポットを選択します。
ホットスポット選択ハンドルをドラッグし、ホットスポットのサイズまたは形状を変更します。

その他の関連ヘルプ

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る