HTMLのarea要素の説明です。area要素は、イメージマップ上のリンクとして反応する領域とそのリンク先を定義する要素です。
目次
要素の記述例
area要素の記述例
<img src="img/cloud-server.png" usemap="#navigation" alt="クラウド">
<map name="navigation">
<area shape="rect" coords="70,14,192,94" href="#" alt="cloud" title="This is cloud.">
<area shape="rect" coords="14,171,68,254" href="#" alt="server1" title="This is server1.">
<area shape="rect" coords="104,171,156,254" href="#" alt="server2" title="This is server2.">
<area shape="rect" coords="192,171,244,254" href="#" alt="server3" title="This is server3.">
</map>閲覧中ブラウザーでの表示結果
要素の説明
- area要素は、イメージマップ上のリンクとして反応する領域とそのリンク先を定義する要素です。
- area要素は、map要素とtemplate要素の内部でのみ利用可能です。
- area要素は、href属性が指定されているとリンクになります。その場合は必ずalt属性を指定する必要があります。
-
area要素は、href属性が指定されていない場合、正式なリンクが出来るまでのダミーリンク（プレースホルダー）となります。この場合、以下の属性は定義できなくなります。
- alt属性 , download属性 , hreflang属性 , referrerpolicy属性 , rel属性 , target属性 , type属性
利用できる属性
| 属性名 | 属性の説明 |
|---|---|
| alt | 画像が利用できない場合に、代わりに表示するテキストを定義する属性です。 |
| coords | イメージマップ内で定義する領域の座標を、画像の左上からビクセル数を定義する属性です。 |
| download | リンク先ファイルがダウンロード用であることを定義する属性です。 |
| href | リンク先のURLを定義する属性です。 |
| hreflang | リンク先ファイルの言語の種類を定義する属性です。 |
| referrerpolicy | リファラーをどう処理するかを定義する属性です。 |
| rel | リンク先ファイルとの関係（リンク元から見てリンク先は何であるか）を示すキーワードを定義する属性です。 |
| shape | イメージマップ内で定義する領域の形状の種類を示すキーワードを定義する属性です。 |
| target | リンク先を表示させるウィンドウ、タブ、インラインフレーム、などの名前またはキーワードを定義する属性です。 |
| type | リンク先ファイルのMIMEタイプを定義する属性です。 |
グローバル属性
HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧についてはは「グローバル属性」を参照してください。
イベントハンドラ属性
area要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。
ブラウザデフォルトCSS設定
Google Chromeの場合
area要素のブラウザデフォルトCSS
area {
display: inline;
cursor: pointer;
}
