<AREA>

<AREA href="URL" shape="形" coords="範囲" alt="代替テキスト">

• <AREA>は、 <IMG> 、 <MAP> と組み合わせることでイメージマップリンクをつくる。
• HTMLタグでひとつの画像に複数のリンクを設定することを、クライアントサイドイメージマップという。
  または、クリッカブルマップともいう。

タグの形式

• 開始タグ　：　必須　/　終了タグ　：　なし

参考HTMLソース

<IMG src="○○.gif" width="129" height="80" alt="サンプル" border="0" usemap="#map1">
<MAP name="map1">
<AREA href="○○.html" shape="circle" alt="円" coords="85,30,20">
</MAP>

はじめに、<IMG>に、usemap属性で、マップの名前をつける。

• これで、この画像でクライアントサイドイメージマップ機能を使うということを指定している。
• マップの名前の前に # をつけるのを忘れずに。
  名前は半角英数字で好きな名前をどうぞ。　（例：　map1　）

• alt属性（代替テキスト。必須！）、width属性、height属性もなるべく指定。
  • border="0"か、style="border:0px;"を指定すれば、リンクの枠線は消える。
  • width属性、height属性で、小さい画像を拡大して大きいイメージマップにすることも可

次に、<MAP name="マップの名前">　〜　</MAP> で、イメージマップを定義。

• マップの名前を、name属性でさっきの名前と同じものをつける。

そして、実際のリンク機能をひとつひとつずつ <AREA>タグとその属性で指定。

• （詳細は下参照）
• alt属性 は、<IMG> と <AREA> の両方にきちんと指定する。
  （HTML4.01で必須とされている）
  • 画像が表示されない場合でも、リンク部分にマウスをのせると、alt属性 のツールチップが表れ、ステータスバーにはリンク先が表示され、ちゃんとリンクできる。

shape="形" coords="座標"

• shape属性で、リンク領域（クリックできる領域）の形を指定する。
  • default　（全体）、rect　（四角形）、circle　（円形）、poly　（多角形）
• coords属性でその位置の座標を指定する。

<AREA shape="rect" coords="a,b,c,d">

• 四角形にリンク領域を設定する。
• 四角形の左上のx座標とy座標、右下のx座標とy座標を順に指定する。
• 

<AREA shape="circle" coords="a,b,c">

• 円形にリンク領域を設定する。
• 中心のx座標とy座標、半径の長さを順に指定する。
• 

<AREA shape="poly" coords="A,a,B,b,C,c,A,a">

• 多角形（何角形でもOK）にリンク領域を設定する。
• 頂点のx座標とy座標を順に指定する。
  必ず最後に最初の頂点の座標をもう一度指定して多角形を閉じる。
• 

href="URL"

• この領域をクリックしてジャンプするところのアドレスを指定する。
• href="URL"　の代わりに　nohref　を指定すれば、どこにも飛ばない。

alt="代替テキスト"

• HTML4.01で必須の属性。画像がなくてもわかるようにする。

• target="ターゲット"　・・・　ターゲットウィンドウを指定。
• nohref　・・・　クリックしてもどこにもジャンプしない。
• accesskey="英数字"　・・・　ショートカットキーを指定。
• tabindex="数字"　・・・　Tabキーを押した際のフォーカス移動順を指定。
• charset="文字コード"　・・・　リンク先文書の文字コード（euc-jp や Shift_JIS など）を指定。
• hreflang="言語コード"　・・・　リンク先文書の言語を指定。（ja など。リンク先の言語が違う場合に使う？）
• type="MIMEタイプ"　・・・　リンク先文書の MIMEタイプを指定。（text/html、image/gif、video/mpeg など）
• rel="リンクタイプ"　・・・　この文書から見たリンク先との関係。
  rev="リンクタイプ"　・・・　リンク先から見たこの文書との関係。
  • Next（前の文書） 、Prev（次の文書）、Contents（目次）、Help（ヘルプ）など。

• class="クラス"
• style="スタイルシート"
• dir="文字の表記方向"
• id="ID"
• name="名前"
• lang="言語コード"
• title="タイトル"

HTMLソース

<IMG src="sample.gif" width="129" height="80" 
alt="サンプル" border="0" usemap="#map1">

<MAP name="map1">
<AREA href="○○.html" shape="rect" alt="四角" coords="150,0,190,130">
<AREA href="○○.html" shape="circle" alt="円" coords="95,65,40">
<AREA href="○○.html" shape="poly" alt="多角形" coords="5,45,60,125,5,125,5,45">
</MAP>

解説

• <MAP name="マップの名前">　〜　</MAP>の間に<AREA>要素を複数はさむことで、
  ひとつの画像にいくらでもリンクが設定可能となる。
• リンク領域が重なった場合は、先に指定したリンク領域を優先する。