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

画像の中に多角形のエリアを作る方法の続きです。

今回は少し複雑な形にしてみます。

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

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



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

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

慣れてきたら自分でアバウトに把握出来るようになるでしょう。

頂点の座標をそれぞれA(120,40)、B(60,100)、C(90,100)、D(90,150)、

E(150,150)、F(150,100)、G(180,100)として多角形のエリアが決定します。



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

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

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

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

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

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

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

<img src="//img01.i-ra.jp/usr/semipro/map_sample_poly02.jpg" alt="" usemap="#map_04">

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

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

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

今回は「クリッカブルマップ。(4)」の記事にリンクさせます。

<area> タグは <map> タグの中に記述します。

shape 属性は多角形なので「poly」です。（「多角形」は英語でpolygon）

coords 属性は全ての角の座標（x,y）を続けて記述します。

今回は頂点の座標がA(120,40)、B(60,100)、C(90,100)、D(90,150)、

E(150,150)、F(150,100)、G(180,100)なので

「coords="120,40,60,100,90,100,90,150,150,150,150,100,180,100"」となります。



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

<img src="//img01.i-ra.jp/usr/semipro/map_sample_poly02.jpg" alt="" usemap="#map_04">
<map name="map_04">
<area shape="poly" coords="120,40,60,100,90,100,90,150,150,150,150,100,180,100" href="http://semipro.i-ra.jp/e639436.html" title="「クリッカブルマップ。(4)」" target="_blank">
</map>

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