属性	値	機能	記述例
href	画像ファイル	画像ファイルの指定	<AREA src="img.jpg">
alt	テキスト	画像の代替テキスト	<AREA alt="全体写真">
taget	フレーム名ウィンドウ名 _blank _self _top _parent	指定したname属性を表示指定したname属性を表示新しいウィンドウを開く同じウィンドウに表示フレームを解除する親フレームに表示	<AREA target="lFrame"> <AREA target="nWindow"> <AREA target="_blank"> <AREA target="_self"> <AREA target="_top"> <AREA target="_parent">
shape	rect circle poly	四角形の領域円形の領域多角形の領域	<AREA shape="rect"> <AREA shape="circle"> <AREA shape="poly">
coords	数値*1	領域の座標	<AREA coords="1,1,30">
nohref	領域にリンクがないことを示す		<AREA nohref>
tabindex	数値	タブキーで移動する順番	<AREA tabindex="2">
accesskey	英字	ショートカットキー	<AREA accesskey="B">

*1coordsには次のように設定します。

rect	：	四角形の左上のx座標, y座標, 四角形の右下のx座標, y座標
circle	：	円の中心のx座標, y座標, 円の半径
poly	：	多角形のすべての点のx座標, y座標を交互に記述

サンプル

イメージマップ

オレンジ色の部分をクリックしてください（リンク先はありません）

サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するタグ・属性です。

<H2>イメージマップ</H2>
<IMG src="img/i0501a.gif" width="400" height="250" border="1" usemap="#mapID"><BR>
<MAP name="mapID">
<AREA shape="rect" coords="259,15,288,69" href="sample1.html" title="コンビニ">
<AREA shape="rect" coords="225,192,288,223" href="sample2.html" title="電器屋">
<AREA shape="circle" coords="59,101,26" href="sample3.html" title="山">
<AREA shape="poly" coords="40,183,124,152,124,183" href="sample4.html" title="GS">
</MAP>

解説・注意点など

複数リンクしたい画像にusemap属性を記述し、#mapIDのように「#」をつけて名前を設定します。

AREAタグはいくつでも指定することができます。

← HTMLタグリファレンス/Tipsに戻る

eWeb