イメージマップの作成
イメージマップって何?
以下の図にマウスカーソルをかさねてみてください。
部分的にハイパーリンクが張られていますよね?
エクストラメーションマーク、「はい」ボタンに触れてみてください。
それぞれ違うリンク先に指定しています。
このように、画像の一部にリンクを張っているものをイメージマップといいます。
FrontPageでは、画像の一部にハイパーリンク(イメージマップ)を簡単に作成することができます。
なんで「イメージマップ」というのか、それは地図の一部にリンクを張りたいときの由来ではないかと思います。
と、私は勝手に解釈してます(笑)
以下が、例の画像に設定されたイメージマップのHTMLソースです。
<map name="FPMap0">
<area alt="ありがとー" coords="74, 73, 150, 93" shape="rect" href="yes.htm">
<area href="../../index.html" shape="POLY" coords="20, 61, 25, 65, 46, 64, 50, 62, 37, 32, 33, 32" alt="www.wanichan.comトップページへ">
<area alt="使ってよぉ・・・" href="#" shape="rect" coords="167, 74, 244, 94">
</map>
<img border="0" src="images/imagemap.png" width="410" height="105" usemap="#FPMap0"></p>
イメージマップには、クライアントサイドイメージマップ、サーバーサイドイメージマップの二種類があります。
FrontPageの図ツールバーを利用して作成することができるのは、クライアントサイドイメージマップです。
これは画像の中の座標を指定して、その中にハイパーリンクを設定するといったしくみになっています。
図ツールバーを表示させよう
FrontPageでイメージマップを簡単に作るには、図ツールバーを利用します。
表示されていない場合は表示するように設定を行ってください。
[表示]→[ツールバー]→[図]をクリックします。
イメージマップに関係するボタンは以下の4つです。
- (四角形のホットスポット)
- 画像の一部分にハイパーリンクを設定したいときに使います。(四角形)
このボタンを押して、設定したい部分上にマウスで指定すると、ハイパーリンクの挿入ダイアログボックスになります。 - (円形のホットスポット)
- 画像の一部分にハイパーリンクを設定したいときに使います。(円形)
このボタンを押して、設定したい部分上にマウスで指定すると、ハイパーリンクの挿入ダイアログボックスになります。 - (多角形のホットスポット)
- 画像の一部分にハイパーリンクを設定したいときに使います。(多角形)
このボタンを押して、設定したい部分上にマウスで指定すると、ハイパーリンクの挿入ダイアログボックスになります。 - (ホットスポットの強調表示)
- ホットスポットが設定されている部分を強調表示します。
四角形のホットスポット
例えば、「はい」ボタンなど、四角形エリアにリンクを張りたい場合は、(四角形のホットスポット) を使用します。
- 画像を選択します。
- (四角形のホットスポット) をクリックすると、マウスポインタが鉛筆の形になります。
左上から右下までドラッグして範囲指定します。 - ハイパーリンクの挿入ダイアログボックスが表示されます。
ファイルまたはホームページアドレスを指定します。
マウスカーソルに触れたときにヒントメッセージを表示させたい場合は、右上の[ヒント設定]ボタンをクリックします。
ハイパーリンクのヒントの設定のダイアログボックスが表示されます。
表示させたいメッセージを入力して、OKボタンをクリックしてください。 - 最後に[ハイパーリンクの挿入]ダイアログボックスの[OK]ボタンをクリックします。
四角形のホットスポット
<area alt="ヒントメッセージ" shape="rect" coords="X1,Y1,X2,Y2" href="リンク先のファイルへのパス">
→X1,Y1は左上角の座標位置、X2,Y2は右下角の座標位置です。
円形のホットスポット
画像の中の丸い部分にリンクを張りたい場合は、(円形のホットスポット) を使用します。
- 画像を選択します。
- (円形のホットスポット) をクリックすると、マウスポインタが鉛筆の形になります。
中心を定めて、半径単位でドラッグして範囲指定します。 - ハイパーリンクの挿入ダイアログボックスが表示されます。
ファイルまたはホームページアドレスを指定します。
マウスカーソルに触れたときにヒントメッセージを表示させたい場合は、右上の[ヒント設定]ボタンをクリックします。
ハイパーリンクのヒントの設定のダイアログボックスが表示されます。
表示させたいメッセージを入力して、OKボタンをクリックしてください。
円形のホットスポット
<area alt="ヒントメッセージ" shape="circle" coords="X1,Y1,R" href="リンク先のファイルへのパス">
→円心部分が座標位置(X1,Y1)となり、Rは半径の長さです。
多角形のホットスポット
三角形など、四角形、円形以外の形でリンクを張りたい場合、(多角形のホットスポット) を使用します。
- 画像を選択します。
- (多角形のホットスポット) をクリックすると、マウスポインタが鉛筆の形になります。
輪郭のポイントをクリックしていって、座標を決めて、始点と終点をつなげます。 - ハイパーリンクの挿入ダイアログボックスが表示されます。
ファイルまたはホームページアドレスを指定します。
マウスカーソルに触れたときにヒントメッセージを表示させたい場合は、右上の[ヒント設定]ボタンをクリックします。
ハイパーリンクのヒントの設定のダイアログボックスが表示されます。
表示させたいメ���������������セージを入力して、OKボタンをクリックしてください。
多角形のホットスポット
<area alt="ヒントメッセージ" shape="POLY" coords="X1,Y1,X2,Y2,X3,Y3,..." href="リンク先のファイルへのパス">
角の座標すべてをcoords属性で指定します。角の数だけ座標位置で指定する仕組みです。
リンクを削除するには
- イメージマップが設定された画像を選択します。
- リンクが設定されている部分を選択します。
- Deleteキーを押します。
問題は解決しましたか?
操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!
2012年12月21日(日本時間)をもって、Expression Web 4はフリーソフトになりました。FrontPageユーザーの方もダウンロードして使ってみてください。 なお、Expression Web 4すでに購入された方も、問題が修正された無料版にアップグレードすることをお勧めします。