クリッカブルマップ。(6)

これまで画像の中にエリアを作ってリンクを張る方法について書いてきました。

今回は改めて総まとめです。

「ペイント」ソフトを使ってこのような画像を作ってみました。

画像のファイル名を「map_sample_all.jpg」としています。



ペイントソフトを使用した理由は今までと同様、

画像の左上の頂点を(0,0)としてそれぞれの図形の座標(x,y)を把握するためです。

右下の星型は画像の中に表示しきれなかったので、ここに書いておきます。
A(300,160)、B(286,200)、C(240,200)、D(277,226)、E(265,265)、
F(300,243)、G(335,265)、H(323,226)、I(360,200)、J(314,200)

画像指定を次のようにします。

「usemap属性」でどのマップを使用するのかを指定します。

マップ名の前に#をつけます。

usemap 属性の値であるマップ名は <map> タグの name 属性で決定します。

自由に分かりやすい名前を付けます。

今回は「map_all」としておきましょう。

画像をアップロードしたら、付け加えて下さい。

<img src="http://www.i-ra/jp/usr/semipro/map_sample_all.jpg" alt="" usemap="#map_all">

<area> タグおよびその属性である shape 、coords を使って

マップの中のどの領域（エリア）をリンク元とするか、

さらに href 属性を使って、どのページにリンクするかを決めます。

今回、長方形（左上）からは「クリッカブルマップ。(2)」、

円形（右上）からは「クリッカブルマップ。(3)」、

三角形（左下）からは「クリッカブルマップ。(4)」、

星型（右下）からは「クリッカブルマップ。(5)」へリンクを張ります。

shape 属性と coords 属性は下表に従って記述します。座標の基準値（x,y）＝（0,0）はイメージファイルの左上です。座標の値はピクセル数で指定します。

shape 属性	coords 属性
rect	長方形の左上の座標（x,y）、右下の座標（x,y）
circle	円形の中心の座標（x,y）、半径の長さ(r)
poly	多角形の全ての角の座標（x,y）

マウスポインタを画像にあてた際に説明が出るようにtitle属性も入れておきましょう。

<img src="//img01.i-ra.jp/usr/semipro/map_sample_all.jpg" alt="" usemap="#map_all">
<map name="map_all">
<area shape="rect" coords="60,50,180,110" href="http://semipro.i-ra.jp/e638791.html" title="「クリッカブルマップ。(2)」" target="_blank">
<area shape="circle" coords="300,80,50" href="http://semipro.i-ra.jp/e639250.html" title="「クリッカブルマップ。(3)」" target="_blank">
<area shape="poly" coords="60,180,60,250,190,250" href="http://semipro.i-ra.jp/e639436.html" title="「クリッカブルマップ。(4)」" target="_blank">
<area shape="poly" coords="300,160,286,200,240,200,277,226,265,
265,300,243,335,265,323,226,360,200,314,200" href="http://semipro.i-ra.jp/e639523.html" title="「クリッカブルマップ。(5)」" target="_blank">
</map>

上記は解説のために見やすいよう途中で切り離して改行していますが、実際は<area・・・>どうしは詰めて記述して下さい。さもないと画像の後にかなりのスペースが空いてしまいます。

<img src="//img01.i-ra.jp/usr/semipro/map_sample_all.jpg" alt="" usemap="#map_all">
<map name="map_all"><area shape="rect" coords="60,50,180,110" href="http://semipro.i-ra.jp/e638791.html" title="「クリッカブルマップ。(2)」" target="_blank"><area shape="circle" coords="300,80,50" href="http://semipro.i-ra.jp/e639250.html" title="「クリッカブルマップ。(3)」" target="_blank"><area shape="poly" coords="60,180,60,250,190,250" href="http://semipro.i-ra.jp/e639436.html" title="「クリッカブルマップ。(4)」" target="_blank"><area shape="poly" coords="300,160,286,200,240,
200,277,226,265,265,300,243,335,265,323,226,360,200,314,200" href="http://semipro.i-ra.jp/e639523.html" title="「クリッカブルマップ。(5)」" target="_blank"></map>

これで画像の中の各図形のエリアにリンクが張られた状態になります。