area要素

area要素は、イメージマップのいくつかのテキストとイメージマップの対応するエリア、またはデッド・エリアでのハイパーリンクのいずれかを表します。また、area要素は、祖先にmap要素またはtemplate要素を持つ必要があります。

例)

<object data="image_map.jpg" type="image/jpeg" usemap="#shapes" width="500" height="200">
<map name="shapes">
<area shape=circle coords="100,100,50" href="blue.html" alt="青い円形" target="_blank">
<area shape=rect coords="200,50,300,150" href="red.html" alt="赤い四角形." target="_blank">
<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">
</map>
</object>

表示)

青い円形赤い四角形.緑の五角形

上記のHTMLドキュメント


alt属性

画像が利用不可の際に使用する代替テキストを指定します。area要素がhref属性を持つ場合はalt属性が必須です。alt属性の値は、ハイパーリンクを表すテキストであり、なおかつ、画像の代替となるような内容のテキストを指定します。

例)

<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">

shape属性

shape属性は、イメージマップ内に作成する図形の種類を指定します。値は以下のキーワードです。


キーワード

例)

<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">

coords属性

coords属性は、イメージマップのshape属性に指定した図形の座標を指定します。値はイメージマップの左上端を(0,0/X座標,Y座標)とする整数で、X座標、Y座標は( , )半角カンマで区切ります。座標の記述は、以下のとおりです。

なお、、HTML5よりcircle状態(shape="circle")の場合の半径の値の単位にパーセントを使うことができなくなりました。



X,Y座標図例、area要素、coords属性


なお、画像のX座標、Y座標は、画像編集ソフトで開き、座標を調べたい場所にカーソルやポインタを合わせると、リソースのプロパティを表示する欄などに座標が現れます。以下の画像は、Windows付属のペイントで画像を開いたところです。緑色の五角形の最頂点の座標(400,50/X座標,Y座標)を表しています。

X、Y座標の調べ方。Windowsペイント。

例)

<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">

href属性

href属性はハイパーリンクのURLを指定します。

例)

<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">

target属性

target属性は、ハイパーリンクやフォームから移動するときのデフォルトで表示される位置を指定します。値は有効なブラウジング コンテキストの名前、または、キーワードです。

なお、HTML5より、例えば、iframe要素と組み合わせて使用するなど、この属性がアプリケーションに有用であるならば非推奨でなくなりました。


キーワード

例)

<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">

hreflang属性

リンクされたリソースの言語を表します。値は、ja、enなどBCP47言語タグを指定します。


type属性

リンクされたリソースのMIMEタイプを表します。値は、text/htmlや、text/cssなどMIMEタイプを指定します。


rel属性

rel属性はリンクのタイプ(関係)を指定します。値はキーワードです。キーワードとその概要は以下の一覧をご覧下さい。


キーワード



download属性

download属性は、対応しているユーザー・エージェントに対して、リソースをナビゲートする代わりにダウンロードして使用するためのハイパーリンクであることを表します。値は、ユーザーがリンクをクリックしたときに開く保存プロンプトなどローカル・ファイル・システムが使用するデフォルトのファイル名を指定します。値を指定しない場合は、href属性で指定しているファイル名が使用されます。→Firefox 33.1の保存プロンプトの画像。

使用可能な値に制限はありません。ただし、ファイルシステムがサポートしていない文字(\ / ? : * " > < |)は、ユーザー・エージェントはそれに応じてファイル名を調整する可能性があります。

カテゴリ
フロー・コンテンツフレージング・コンテンツ
要素を使用することができる場所
フレージング・コンテンツが使用できる場所(先祖にmap要素またはtemplate要素が存在する場合のみを除きます)。
コンテンツ モデル(内容に含めることのできる要素)
-
コンテンツ属性
グローバル属性alt属性shape属性coords属性href属性target属性hreflang属性type属性rel属性download属性

この要素に追加された属性
hreflang属性type属性rel属性
この要素で変更があった属性
coords属性target属性
この要素で廃止された属性
nohref属性。