ドキュメントウィンドウで、画像を選択します。
最終更新日 :
2023年9月25日
Dreamweaver でイメージマップを使用して、Web サイトのインタラクティブホットスポットを作成する方法について説明します.
イメージマップとは、ホットスポットと呼ばれる領域に分割された画像のことです。ホットスポットをクリックすると、新しいファイルが開くなどのアクションが実行されます。
クライアントサイドのイメージマップでは、ハイパーテキストリンク情報は HTML ドキュメントに保存されます。これは、ハイバーテキストリンク情報が別個のマップファイルに保存されるサーバーサイドのイメージマップの場合とは異なります。 サイトビジターが画像のホットスポットをクリックすると、関連付けられた URL が直接サーバーに送られます。 クライアントサイドのイメージマップは、サーバーがクリック箇所を解釈しなくてもすむので、サーバーサイドのイメージマップよりも高速に処理されます。
Dreamweaver では、既存のドキュメント内のサーバーサイドのイメージマップへの参照は変更されません。したがって、同じドキュメント内で、クライアントサイドのイメージマップとサーバーサイドのイメージマップの両方を使用することができます。 両タイプのイメージマップをサポートするブラウザーでは、クライアントサイドのイメージマップが優先的に使用されます。 サーバーサイドのイメージマップをドキュメントに組み込むには、適切な HTML コードを記述する必要があります。
メモ
Dreamweaver でホットスポットを使用するには、デザインビューを表示する必要があります。
クライアントサイドのイメージマップの挿入
クライアントサイドのイメージマップを挿入するときは、 ホットスポット領域を作成してから、 ホットスポット領域をクリックしたときに開くリンクを定義します。
メモ
ホットスポット領域は複数作成できますが、 それらは同じイメージマップの一部です。
プロパティインスペクターの右下隅にある縮小の三角形をクリックして、
すべてのプロパティを表示します。
「マップ」フィールドに、イメージマップの一意の名前を入力します。 1 つのドキュメント内で複数のイメージマップを使っている場合、それぞれのマップに異なる名前を付けてください。
イメージマップ領域を定義するには、以下のいずれかの操作を行います。
円形ツール
を選択し、ポインターを画像上にドラッグして、
円形のホットスポットを作成します。 長方形ツール
を選択し、ポインターを画像上にドラッグして、
長方形のホットスポットを作成します。多角形ツール
を選択し、頂点を 1 回ずつクリックして、
不規則な形状のホットスポットを
定義します。 矢印ツールをクリックし、形状を確定します。ホットスポットを作成すると、 ホットスポットのプロパティインスペクターが表示されます。
「リンク」フィールドで、フォルダーアイコンをクリックし、ホットスポットがクリックされたときに開くファイルを選択するか、ファイルのパスを入力します。
ターゲットドロップダウンリストから、ファイルを開くウィンドウを選択するか、ウィンドウの名前を入力します。
現在のドキュメントで指定した すべてのフレームの名前がポップアップリストに表示されます。 存在しないフレームを指定した場合、 リンクされたページは、指定した名前の 新規ウィンドウにロードされます。 以下のターゲット名を 選ぶこともできます。
- _blank は、リンクされたファイルを新規のブラウザーウィンドウにロードします。
- _parent は、リンクされたファイルを、リンクが含まれている親フレームセットまたはフレームのウィンドウにロードします。 リンクを含むフレームがネストされていない場合は、リンクされているファイルは、ブラウザーウィンドウ全体にロードします。
- _self は、リンクされたファイルを、リンクと同じフレームまたはウィンドウにロードします。 このターゲットは初期設定なので、通常は指定する必要はありません。
- _top は、リンクされたファイルをブラウザーウィンドウ全体にロードして、すべてのフレームを削除します。
- _new は、リンクされたファイルを新規のブラウザーウィンドウにロードします。
メモ
このターゲットオプションは、選択したホットスポットにリンクが含まれていない場合は使用できません。
「代替」ボックスに、テキスト専用ブラウザー、
または画像を手動でダウンロードするよう設定されたブラウザーに表示する代替テキストを入力します。 ブラウザーによっては、
ユーザーがマウスポインターをホットスポット上に置いたときに、
このテキストがツールヒントとして表示されます。
イメージマップに追加のホットスポットを定義するには、
手順 4 ～ 7 を繰り返します。
画像のマッピングを終了したら、
ドキュメントの空白の領域をクリックし、プロパティインスペクターの表示内容を切り替えます。
イメージマップのホットスポットの修正
イメージマップ内に作成したホットスポットは 簡単に編集できます。 ホットスポット領域の移動、ホットスポットのサイズ変更や 絶対位置のエレメント（AP エレメント）の前面/背面への移動などを 行うことができます。
ホットスポットを含む画像を他のドキュメントにコピーしたり、 画像間でホットスポット（複数可）をコピー＆ペーストしたりできます。 画像に関連付けられたホットスポットを、 新規ドキュメントにコピーすることもできます。
イメージマップでの複数の ホットスポットの選択
ポインターホットスポットツールを
使用してホットスポットを選択します。
次のいずれかの操作を実行します。
目的のホットスポットを Shift キーを 押しながらクリックします。
すべてのホットスポットを選択するには、Ctrl + A キー（Windows） または Command + A キー（Macintosh）を押します。
ホットスポットの移動
ポインターホットスポットツールを使用して
ホットスポットを選択します。
次のいずれかの操作を実行します。
新しい位置にホットスポットをドラッグして移動します。
Ctrl + 矢印キーを押すと、目的の方向へ 10 ピクセルずつ ホットスポットを移動できます。
矢印キーを押すと、目的の方向へ 1 ピクセルずつ ホットスポットを移動することができます。
ホットスポットのサイズ変更
ポインターホットスポットツール
を使用して
ホットスポットを選択します。
を使用して
ホットスポットを選択します。
ホットスポット選択ハンドルをドラッグし、
ホットスポットのサイズまたは形状を変更します。
