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 によって画像サイズごとに領域を変更するなどの配慮が必要になるでしょう。
- ad -
<image>
ここでの <image> エレメントは、クリッカブルマップのためのエレメントです。<image> エレメントの usemap 属性で <map> の name 属性値を指定します。
JavaScript では、usemap 属性が既存の属性と認識されないブラウザがあります。
動作の確認
上記のエレメントの属性値から HTML テキストを作成します。
- ad -