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

通常、ホームページやブログで表示されている画像は、

横幅が○○px（ピクセル）、縦幅が●●pxという長方形の画像です。

その画像から単純にリンクを張る場合は、

<a href="（リンク先URL）" target="_blank"><img src="（画像のURL）" alt="" ></a>

となります。

※「target="_blank"」は別ウインドウを開く場合の指定なので

同一ウインドウに読みこむ（ページ移動する）場合は不要です。



これに対し、「クリッカブルマップ」は画像上の特定のエリアからリンクを張ります。



まず今回は、画像の中に長方形（rectangle）のエリアを作る方法です。

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

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



なぜペイントソフトを使用したかというと、図の中にあるように、

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

この場合、長方形の左上の頂点の座標が(50,50)、

右下の頂点の座標が(150,100)であることが分かれば、長方形のエリアが決定します。



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

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

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

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

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

ここでは「map_01」としておきましょう。

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

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

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

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

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

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

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

shape 属性は今回の長方形の場合、「rect」です。（「長方形」は英語でrectangle）

coords 属性は左上の座標（x,y）、右下の座標（x,y）を続けて記述します。

今回は左上(50,50)、右下(150,100)なので「coords="50,50,150,100"」です。

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

<img src="//img01.i-ra.jp/usr/semipro/map_sample_rect01.jpg" alt="" usemap="#map_01">
<map name="map_01">
<area shape="rect" coords="50,50,150,100" href="http://semipro.i-ra.jp/e637866.html" title="「クリッカブルマップ。(1)」" target="_blank">
</map>

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