HTML5 画像の一部分にリンクをつける(map/areaタグ)

2020-06-08

今回は、HTML5となっていますが、普通に使用できる内容になります。
画像にリンクをつける際、<a>タグで囲むことで、リンクを設定することができますが、例えば、大きい画像があり、その一部分にリンクを設定したいという場合、<map>タグを使用することで、解決することができます。

使用方法

まず、<img>タグと<map>を関連付けをします。

usemapという属性が関連付けのためのキーとなります。
値には必ず # をつけてください。#がないと<map>タグで指定しても効きません。
次に、<map>タグを記述して、リンクの設定を記載していきます。

というように記述します。
<map>タグの記述箇所は、特に指定はありませんが、<img>タグの下あたりに記述しておくと、修正等がしやすいかなと個人的には思います。

まず、<map>タグにはname属性を付け、imgで指定したusemapの値を入れます。
（#は不要です）
そして、<map></map>の中に、<area>を記述することで、リンクを指定することができます。
<area>タグの記述は、少し特殊ですが、下記が属性についての解説になります。

href リンク先URL
shape リンクの形状
・rect ・・・ 長方形に
・circle ・・・ 円形に
・poly ・・・ 多角形に
・default ・・・ 画像全体に（他で定義済みの部分は不要）
coords リンクを配置する位置。指定の仕方は後述
alt 画像を表示できないときの代替テキスト。href属性を使用する場合は必須。
tarrget リンク先をどこで開くか。href属性とあわせて使用。
rel リンク先との関係。nofollowなど
download クリックでファイルをダウンロードするときに指定

shapeの指定によって、coordsの記述方法は変わってきます。
【 rect 】 は、長方形のリンク領域の指定となり、
coordsの指定は、対角の角2点の位置を記述します。
【 circle 】 は、円形のリンク領域の指定となり、
coordsの指定は、中心値と半径を記述します。
【 poly 】 は、多角形のリンク領域の指定となり、
coordsの指定は、各頂点を記述します。
また、各点の位置は、画像の左上を基準点として、そこからの距離の指定になっています。

まず、rect と circle の記述方法が比較的わかりやすいと思うので、イメージ図と合わせて記載します。

いろいろなサイトでも記載はありますが、いまいちイメージしにくかったので、数学のグラフのようにしてみました。

【 poly 】 は、各点を増やしていけば、より複雑な形にすることも可能ですが、記述をミスるとおかしくなるので、注意してください。
また、２つの領域が重なってしまった場合などは、先に指定されたリンク領域が優先されます。

補足 1

coordsの点の座標の確認に手間がかかるという場合、下記のサイト様で簡単に生成してくれますので、参考までに。
HTML Imagemap Generator

補足 2

実は、<map>タグは、レスポンシブには対応していません。
CSSで width: 100%; と記述しても適用されません。
なので、画像に width: 100%; を指定しても、<area>に記述した指定値は、そのままなので、ズレが大きくなっていきます。
そこで、Javascriptによって、<area>の値を変更する方法が用いられます。
まず、下記サイトより、プラグインをダウンロードします。
・https://github.com/stowball/jQuery-rwdImageMaps
・https://cdnjs.com/libraries/jQuery-rwdImageMaps
そして、下記も記述しておきます。　

これで、<map>タグのレスポンシブの対応をすることができます。

補足 3

<map>タグは一部のショッピングカートと相性が悪いようなので、使用の際はご注意ください。