画像をマップする
イメージ マップとは、URL にリンクするマップ エリア (領域またはホットスポットともいう) を含むグラフィックです。セルの形状には、円形や矩形、または不規則な形状があります。セル上にマウスを移動すると、カーソルが手のアイコンに変化し、その領域をクリックすると別の Web ページに移動できることを示します。
マップ エリアを作成する
[イメージ マップ] ダイアログ ボックスの [ツール] グループ ボックスのツールを使用して、画像マップ エリアを作成、編集します。
ツール | 説明 |
| [配置] ツールを使用して、ホットスポット エリアを変更できます。 |
| [移動] ツールでホットスポット エリアを移動できます。 |
| [多角形] ツールは、不規則な形状のホットスポット エリアを作成します。 |
| [矩形] ツールは、正方形または矩形のホットスポット エリアを作成できます。 |
| [円形] ツールは、円形または楕円形のホットスポット エリア を作成できます。 |
| [削除] ツールは、ホットスポット エリアを削除できます。 |
| [パン] ツールは、プレビュー内の画像をドラッグして、画像の表示されていない領域を表示できます。 |
マップ エリアのプロパティを割り当てる
マップ エリア (領域) を作成した後で、URL、ALT テキスト、ターゲットを割り当てることができます。
イメージ マップの保存
ハード ディスク上のフォルダーにイメージ マップを保存して、後で使用したり、編集したりすることができます。またマップの設定をクリップボードに保存して、HTML コードに貼り付けることもできます。マップ設定を保存すると、マップ エリアの配置と、[イメージ マップ] ダイアログ ボックスで入力した情報が保存されます。保存した設定は、同じ画像にもう一度読み込んだり、他の画像で使用することができます。
マップの環境を設定する
マップ エリア (領域) を作成した後で、URL、ALT テキスト、ターゲットを割り当てることができます。
マップ エリアを作成/保存するには
ワークスペースの編集
1 [ファイル] [エクスポート] [イメージ マップ] を選択します。
[イメージ マップ] ダイアログ ボックスが表示されます。
2 次のツールのうちいずれかを選択し、プレビュー領域で描画してホットスポットを作成します。
• [矩形] ツール
![](../Corel_PaintShop_Pro/images/image_map_rectangle_2.jpg)
— カーソルをドラッグして、正方形または長方形のホットスポット エリアを囲みます。
• [円形] ツール
![](../Corel_PaintShop_Pro/images/image_map_circle_2.jpg)
— カーソルをドラッグして、円形または楕円形のホットスポット エリアを囲みます。
• [多角形] ツール
![](../Corel_PaintShop_Pro/images/image_map_polygon_2.jpg)
— 開始地点をクリックして設定し、マウス ポインタを移動してはクリックを繰り返して、不規則な形状のホットスポット エリアを囲みます。多角形を完了するには、ダブルクリックします。
3 [URL] ドロップリストに、リンク先の Web ページのアドレスを入力します。
画像内で既に使用したアドレスを選択する場合は、ボックスの矢印をクリックして、[URL] ドロップリストからアドレスを選択します。
Web ページにリンクしない場合は、「#」を入力します。
4 [テキスト] テキスト ボックスには、画像を読み込めない場合や、ユーザーが Web ブラウザーで画像の表示を無効にしている場合に表示されるテキストを入力します。
5 [ターゲット] ドロップリストで、次のターゲット フレームまたはウィンドウ オプションのいずれかを選択します。
• _blank - リンク先のページを新しいブラウザー ウィンドウに読み込みます。
• _parent - リンク先のページをリンクする親ウィンドウのフレームセットに読み込みます。ネストされているフレームにリンクが入っていない場合、画像はブラウザー ウィンドウ全体に読み込まれます。
• _self -リンク先のページを同じフレームのリンクとして読み込みます。
• _top - リンク先のページをブラウザー ウィンドウ全体に読み込んで、すべてのフレームを削除します。
6 [保存] をクリックします。
[HTML の保存] ダイアログ ボックスが表示されます。
7 HTML コードを保存するフォルダーに移動して、[保存] をクリックします。
[イメージ マップの保存] ダイアログ ボックスが表示されます。
8 画像を保存するフォルダーに移動して、[保存] をクリックします。
目的 | |
既存のマップ エリアを選択する | [配置] ツール をクリックして、マップ エリアをクリックします。 |
マップ エリアの形状またはサイズを変更する | [配置] ツールをクリックしてから、図形をクリックして選択し、表示される緑のポイントの 1 つにマウスを合わせると、カーソルが 4 方向の矢印になります。点を新しい位置までドラッグします。 |
マップ エリアを移動する | [移動] ツール ![](../Corel_PaintShop_Pro/images/mixerpal_navigatebutton_3.jpg) をクリックして、マップ エリアの内側をクリックし、新しい位置までドラッグします。 |
マップ エリアを消去する | [削除] ツール ![](../Corel_PaintShop_Pro/images/image_slicemap_eraser_4.jpg) をクリックして、マップ エリアの内側をクリックします。 |
すべてのマップ エリアを削除する | [クリア] をクリックします。 |
Web ブラウザーでイメージ マップをプレビューする | [ブラウザーでプレビュー] ボタン ![](../Corel_PaintShop_Pro/images/preview_in_browser.jpg) をクリックして Web ブラウザーでマップ エリアを検証します。 |
マップ エリア情報をクリップボードに保存して、HTML コードに貼り付けられるようにする | [クリップボード] ボタンをクリックし、[HTML コピー先フォルダー] ダイアログ ボックスを開きます。HTML ファイルが保存されているフォルダーに移動して、[OK] をクリックし、スライスの設定を保存します。次に、HTML ファイルを開き、HTML スライス コードを挿入する場所にカーソルを置いて、Ctrl + V キーを押します。 |
マップ エリアのロールオーバーを作成する | [ロールオーバーの設定] をクリックします。画像のロールオーバーの作成の詳細については、 画像のロールオーバーを作成するを参照してください。 |
マップの環境を設定するには
ワークスペースの編集
1 [イメージ マップ] ダイアログ ボックスで、[環境設定] をクリックします。
[イメージ マップの設定] ダイアログ ボックスが表示されます。
2 [アクティブ タイルの境界線の色] カラー ボックスをクリックして色を選択します。
3 [非アクティブ タイルの境界線の色] カラー ボックスをクリックして色を選択します。
4 [一覧の履歴数] コントロールには、[イメージ マップ] ダイアログ ボックスの [セルのプロパティ] グループ ボックスの [URL] ドロップリストと [テキスト] ドロップリストに格納される項目数を設定または入力します。
5 [OK] をクリックします。
マップ設定を保存するには
ワークスペースの編集
1 [設定の保存] をクリックします。
[マップ設定の保存] ダイアログ ボックスが表示されます。
2 設定ファイルを保存する場所に移動します。
3 ファイルの名前を入力して、[保存] ボタンをクリックします。
ファイルは JMD 形式で保存されます。
マップ設定を読み込むには
ワークスペースの編集
1 マップの設定を読み込ませる画像を開きます。
2 [ファイル] [エクスポート] [イメージ マップ] を選択します。
[イメージ マップ] ダイアログ ボックスが表示されます。
3 [設定のロード] をクリックします。
[マップ設定のロード] ダイアログ ボックスが表示されます。
4 読み込む JMD ファイルのあるフォルダーに移動してファイルを選択します。
5 [開く] をクリックします。