area

提供: ASCII.jp HTMLリファレンス

ver.8~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 イメージマップの領域定義
読み方 エリア

カテゴリー

フロー・コンテンツ/フレージング・コンテンツ

親にできる要素/カテゴリー

フレージング・コンテンツが期待される個所
ただし、map要素の子孫であること

子にできる要素/カテゴリー

<area 属性="値">

属性 概要
alt 文字列 ハイパーリンクの文字列
shape 文字列 エリアの形状
coords コンマで区切った整数値 エリアの形状を決める座標群
href URL ハイパーリンク先のアドレス
target 文字列 ブラウジングコンテキスト
rel 文字列 ハイパーリンク先のタイプ
media 文字列 メディアの種類
hreflang 文字列 ハイパーリンク先の言語
link 文字列 ハイパーリンク先のMIMEタイプ

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 map要素は、area要素と組み合わせて、イメージマップの定義に使います。

 href属性で、ハイパーリンク先のアドレスを指定します。href属性を指定する場合、alt属性でハイパーリンクの文章を指定する必要があります。一方、href属性を指定しない場合、そのエリアは選択できないことを意味します。この場合、alt属性は省略しなければなりません。

 shape属性では、以下の表の値からエリアの形状を指定します。shape属性を省略した場合は、「shape="rect"」を指定したのと同様です。

形状 備考
円形 circle
circ 非準拠
標準 default
多角形 poly
polygon 非準拠
四角形 rect
rectangle 非準拠

 coords属性では、図形の形を表すための座標を指定します。shape属性に指定した値に応じて、coords属性の指定方法が異なります。

 shape属性で円形(circle)を指定した場合は、下図のx、y、rの3つの値をコンマで区切って指定します。四角がmapを指定するイメージ領域で、円がクリック可能なエリアを表します。

 多角形(poly)を指定した場合は、6つ以上の整数値を指定します。値は2つ1組で、それぞれがイメージの左上から見た点の位置を表します。
 例えば、下図のような三角形のエリアを指定する場合だと、x1、y1、x2、y2、x3、y3の6つの値をコンマで区切って指定します。四角がmapを指定するイメージ領域で、三角がクリック可能なエリアを表します。

 四角形(rect)を指定した場合は、下図のx1、y1、x2、y2の4つの整数値を指定します。外側の四角がmapを指定するイメージ領域で、内側の四角がクリック可能なエリアを表します。

 defaultを指定した場合は、coords属性を指定してはなりません。この場合、イメージ全体が領域になります。

 なお、target、rel、media、hreflang、typeの各属性は、a要素と同じ方法で指定します。

サンプル

(body要素の内部のみ掲載)

<h1>map要素の例</h1>
<p>
<img src="map.png" alt="map要素用の図" usemap="#points">
</p>
<map name="points">
<area shape="rect" coords="0,0,150,100" alt="赤" title="赤" href="red.html">
<area shape="rect" coords="150,0,300,100" alt="青" title="青" href="blue.html">
<area shape="rect" coords="0,100,150,200" alt="黄" title="黄" href="yellow.html">
<area shape="rect" coords="150,100,300,200" alt="緑" title="緑" href="green.html">
</map>

サンプル実行画像

 赤の部分をマウスでポイントした場合

 緑の部分をマウスでポイントした場合

Powered by Web Professional

目次