<area> イメージマップの領域を指定する

<area>タグの説明

<area>は、一つの画像に対して複数のリンク先を設定する、イメージマップを作る祭に使用します。本来、一つの要素に複数のリンクを設定することは出来ないように思われますが、画面上の座標を使って範囲を区切り、それぞれにリンク先を持たせる事で実現します。

イメージマップを作るには、<map>でマップの名称を決め、<area>でリンク先と適用範囲を設定し、<img>で使用する画像とそこに適用するマップの名称を指定します。

<area>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
• 同一のページ内に複数使うことができます。ただし、<map>の子要素であることを要求します。

<area>に指定できる主な属性

src="URL"

画像のファイルパスを指定する際に使用します。

alt="代用テキスト"

代用テキストを指定する際に使用します。

usemap="#マップ名"

マップ名を指定する際に使用します。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

イメージマップの設定

<img src="画像URL" usemap="#MAP名">

画像ファイルと参照するMAP名を指定します。

<map name="MAP名">

<img>のusemap属性で参照する名前を定義します。

<area href="リンク先" shape="形状" coords="領域" alt="概要">

マップのリンク先、形状、領域、概要を定義します。

• shape="rect"：四角形
• coords="左端からの位置,上からの位置,右端の位置,底辺までの位置"

• shape="poly"：多角形
• coords="頂点の座標を時計回りで左端からの位置,上からの位置で記述"

• shape="circle"：円形
• coords="左端からの中心点の位置,上からの中心点の位置,半径"

<area>の使い方とサンプル

このタグを使ったマークアップのサンプルです。

<div>
	<img src="../images/imagemap001.gif" usemap="#menumap" alt="サンプル" width="450" height="50" border="0">
	<map name="menumap">
		<area href="#area1" shape="rect" coords="20,3,70,47" alt="TOP">
		<area href="#area2" shape="rect" coords="90,3,165,47" alt="ABOUT">
		<area href="#area3" shape="rect" coords="193,3,257,47" alt="NEWS">
		<area href="#area4" shape="rect" coords="285,3,337,47" alt="MAP">
		<area href="#area5" shape="rect" coords="358,3,425,47" alt="MAIL">
	</map>
</div>