ウェブランサー

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

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
タイプ -
取り扱い 標準

<area>タグは、一つの画像に対して複数リンクを指定したい場合に<map>タグと合わせて使用します。本来一つの要素には、複数のリンクを指定する事は出来ないように思われますが、領域を指定し、それぞれにリンク先を持たせる事で実現します。これをイメージマップと言います。

イメージマップでは、 <map>タグでマップ全体を定義し、<area>タグでリンク領域とリンク先を指定します。また、<img>タグでマップを適用する画像とその画像が使用するマップ名を指定します。

<area>タグに指定できる属性

src="URI"
画像のファイルパスを指定する際に使用します。
alt="代用テキスト"
代用テキストを指定する際に使用します。
usemap="#マップ名"
マップ名を指定する際に使用します。

イメージマップの設定

<img src="画像.gif" usemap="#参照するMAP名" />
画像ファイルと参照するMAP名を指定します。
<map name="MAP名">
imgのusemap属性で参照する名前を定義します。
<area href="リンク先" shape="形状" coords="領域" alt="概要" />
マップのリンク先、形状、領域、概要を定義します。

イメージマップ 四角形
shape="rect":四角形
coords="左端からの位置,上からの位置,右端の位置,底辺までの位置"

イメージマップ 多角形
shape="poly":多角形
coords="頂点の座標を時計回りで左端からの位置,上からの位置で記述"

イメージマップ 多角形
shape="circle":円形
coords="左端からの中心点の位置,上からの中心点の位置,半径"

<map>の使用サンプル

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

<area>に関連するHTMLタグ

コンテンツエンベット要素
<area> イメージマップの領域を指定する
<audio> ドキュメント内に音声コンテンツを埋め込む
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<embed> プラグインデータを埋め込む(NN独自)
<iframe> インラインフレームを作成する
<img> 画像を表示する
<map> 一つの画像に対して複数のリンクを設定する
<object> FLASHやデータを埋め込む
<param> パラメーターを指定する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<script> JAVAなどのスクリプトを埋め込む
<track> 動画や音声ファイルに字幕やキャプションを追加する
<video> ページ内に動画コンテンツを表示する