【HTML Living Standard】map要素の使い方

mapオブジェクトは、イメージマップを表すオブジェクトです。イメージマップとは、ウェブページに表示される一枚の画像において、その画像内の特定の領域をそれぞれ異なるリンク先へ導くことができるように定義する仕組みのことです。これにより、単一の画像から複数のインタラクティブな操作を可能にし、ユーザーエクスペリエンスを向上させることが目的です。

このmapオブジェクトは、通常、画像を配置する<img>要素と組み合わせて使用されます。まず、mapオブジェクトを作成し、そのname属性にユニークな識別子を設定します。次に、画像を埋め込む<img>要素のusemap属性に、#記号の後にmapオブジェクトで設定したname属性の値を記述することで、両者を関連付けます。

mapオブジェクトの内部には、area要素を一つ以上配置します。各area要素は、イメージマップ内でクリック可能な特定の形状（例えば、矩形、円、または複雑な多角形など）と、その形状がクリックされた際のリンク先となるURL、および代替テキスト（alt属性）を定義します。これにより、開発者は一枚の画像の中に複数の異なるリンクを持つホットスポットを柔軟に設定できます。

例えば、ウェブサイト上で会社の組織図を一枚の画像として表示し、mapオブジェクトとarea要素を用いることで、画像内の各部署をクリックすると、その部署の詳細情報ページや担当者一覧ページへ移動させるといった、視覚的で直感的なナビゲーションを構築できます。name属性の値は、HTMLドキュメント内で一意である必要があります。この機能は、複雑なナビゲーションや情報の階層化を視覚的に表現する際に特に有効です。

Copy
1<map name="mapname">
2  <area shape="rect" coords="0,0,50,50" href="link1.html" alt="Description 1">
3  <area shape="circle" coords="100,100,25" href="link2.html" alt="Description 2">
4</map>

引数なし

引数はありません

戻り値なし

戻り値はありません