備忘録的プログラミングリファレンス

<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 によって画像サイズごとに領域を変更するなどの配慮が必要になるでしょう。

<map>

 <map> エレメントは、画像上に複数のクリックできる領域を設けることができる、クリッカブルマップのための親エレメントです。 <area> エレメントはその子エレメントで、クリックできる領域ごとに定義します。

 JavaScript においては HTMLMapElement を参照してください。

属性名概要
name<map> エレメントを特定するために用いる。<image> の usemap 属性から特定

<area>

 <area> エレメントは、画像上に複数のクリックできる領域を設けることができる、クリッカブルマップのための子エレメントです。

 クリッカブルマップを実現するための機能を提供します。<map>上のクリックできる領域ごとのエレメントです。

 JavaScript においては HTMLAreaElement を参照してください。

属性名概要
id固有名称のための ID
classスタイルクラスの定義
shapeクリック領域の概形。
shape の選択肢
  • default.. 全ての領域
  • rect..四角形、左上と右下の座標
  • circle.. 円形、中心座標と半径
  • poly.. 多角形、各頂点
coordsリンク領域の座標を指定
hrefリンク先の指定。nohrefで移動しない
alt代替テキストの指定
target 表示ターゲットの指定。以下の値が指定できます。
target の選択肢
  • なし... default
  • _blank... 別タブまたはウィンドウに表示
  • _self... リンク元に表示
  • _parent... ひとつ上の親フレームに表示
  • _top... フレームがあれば全て解除して表示
  • nameを指定... Window や <iframe> の name 属性
titleポインターがエレメント上にあると表示されるポップアップのテキスト

<image>

 ここでの <image> エレメントは、クリッカブルマップのためのエレメントです。<image> エレメントの usemap 属性で <map> の name 属性値を指定します。

 JavaScript では、usemap 属性が既存の属性と認識されないブラウザがあります。

属性名概要
usemap#が付いた <map> の name 属性を指定
src画像ファイルの URL

動作の確認

 上記のエレメントの属性値から HTML テキストを作成します。