HTML <area> タグ

定義と使用方法

<area> タグ内に常に埋め込まれています（イメージマッピングは、クリック可能なエリアを持つイメージ、つまりクライアントのパーティション応答図です）。

<area> 要素は、 <map>タグ内に常に埋め込まれています。

注意：<img> 内の usemap属性 と <map>要素 の name 属性関連付け、イメージとマッピング間の関連を生成します。

参照してください：

HTML DOM リファレンスマニュアル：エリアオブジェクト

例

例1

クリック可能なエリアを持つイメージマッピング：

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">

自分で試してみてください

例2

クリック可能なエリアを持つ別のイメージマッピング：

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">

自分で試してみてください

指定されたエリアの代替テキストを規定します。href属性がある場合、必須です。
指定されたエリアの座標を規定します。
ユーザーがリンクをクリックしたときにダウンロードされるターゲットを規定します。
指定されたエリアの超リンクのターゲットを規定します。
ターゲットURLの言語を規定します。
ターゲットURLの最適化されるメディア/デバイスを規定します。
リンクと一緒に送信する参照情報を規定します。
現在のドキュメントとターゲットURLの関係を規定します。
指定されたエリアの形状を規定します。
  • フレーム名
 ターゲットURLをどこで開くかを指定します。
type メディアタイプ ターゲットURLのメディアタイプを指定します。

グローバル属性

<area> タグはサポートしています HTMLのグローバル属性。

イベント属性

<area> タグはサポートしています HTMLのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値で表示します <area> 要素：

area {
  display: none;
{}

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート