mapタグで特定領域にリンクを設定

mapタグを利用することで、画像内の特定領域にリンクを設定することができます。地図画像にリンクを設定するなどの活用ができます。

例に利用する画像

例として次の図の5角形領域にリンクを設定してみます。

maptag.png

座標位置を調べる

まず5角形の頂点座標を調べます。ペイントなどで座標位置を調べることができます。

maptag_paint-285x300.png

座標位置を調べた結果です。

maptag_pos.png

コーディング

次にソースを示します。imgタグの usemap属性 には、mapタグの name属性 で指定した値の先頭に # を付与した値を設定します。

今回は多角形の領域をリンクにするので、areaタグのshape属性poly にします。上記で調べた座標位置は coords属性 で指定します。

<img src="maptag.png" alt="サンプル" width="172" height="145" usemap="#sample" />
<map name="sample">
  <area href=# shape="poly" alt="5角形" coords="109,28,157,52,139,94,76,95,59,52">
</map> 

動作確認

5角形の上にマウスを移動してみてください。

maptag.png 5角形

1つの画像内に複数のリンクを設定する場合は、リンク数分だけareaタグを設定します。

わくわくBank.
フリーランスのエンジニアとして活動してます。ここでは、ソフトウェア開発で必要とされる技術、用語、概念を整理しています。