ひとつの画像に複数のリンクを設定することをクライアントサイドイメージマップといいます。このクライアントサイドイメージマップではマップ全体を<map>タグで定義し、リンク領域とリンク先を設定するタグが<area>です。
今回は<area>タグの使い方を紹介していきます。
HTMLにおける<area>タグの使い方
area要素はshape属性、coords属性で領域の形と座標を指定し、href属性でリンク先のURLを指定します。書式の例を示します。
|
1 |
<area shape=”形状” coords=”座標” href=”リンク先のアドレス></map> |
ここで<area>タグで指定するリンクの領域の形状には四角形（rect）、円形（curcle）、多角形（Poly）の3種類があります。
また、指定する複数のリンク領域が重なったときには先に指定したリンク領域が優先されます。例えば円形で、中央の座標がx=0、y=0かつ半径が20で、UX MILKがリンク先の場合、次の例のように記載されます。
|
1 |
<area shape=”circle” coords=”0,0,20” href=”http://uxmilk.jp/”></map> |
shape属性で四角形を指定している場合には、coords属性の座標は4つ必要になります。使用できる属性は以下のものがあります。
- alt
- coords
- href
- target
- nohref
- name
- shape
- rel
- media
- hreflang
- link
グローバル属性：
- accesskey
- class
- contenteditable
- dir
- hidden
- id
- lang
- spellcheck
- style
- tabindex
- title
- translate
イベントハンドラ属性：
- onblur/onfocus
- onclick
- ondblclick
- onkeydown/onkeypress/onkeyup
- onmousedown/onmousemove/onmouseup
- onmouseout/onmouseover
まとめ
<area>タグは画像のリンク領域とリンク先を設定します。リンク領域の設定には形状と座標が必要になります。
