map, area タグエレメント

　map、area タグエレメントは、画像上に複数のクリックできる領域を設けることができる、クリッカブルマップのためのタグエレメントです。イメージの中に幾つかのリンクのある領域を設けることができます。

　このHTMLタグではクライアントサイドクリッカブルマップです。クリッカブルマップにはサーバーサイドでの処理と、クライアントサイドでの処理があります。

　<map> が親エレメント、<area> がその子エレメントになります。

<map name="example">
  <area href="/page_example0.html" shape="rect" coords="50,50,200,200">
  <area href="/page_example1.html" shape="circle" coords="100,100,50">
</map>

<img usemap="#example" src="/images/ogp.png">

　<area> による領域が重なったら、先に定義されたエレメントが優先されます。

　画像サイズの領域に、<area> による定義領域が収まっていることが推奨されます。

　＊現在はレスポンシブ対応のページにするために画像は表示デバイスによって大きさを変える場合が多いです。そのために、map, area タグエレメント はあまり使われていません。
　もし、利用する場合は JavaScript によって画像サイズごとに領域を変更するなどの配慮が必要になるでしょう。