【初心者でもわかる】1枚の画像に複数のリンクを設置できるクリッカブルマップの設定方法

どうも7noteです。クリッカブルマップ・イメージマップの設定方法

都道府県の地図だったり、1枚の画像の左右でリンク先を分けたい時などに使えるクリッカブルマップの設定方法について解説していきます。
px単位での設定なので画像のpxが測れる環境（画像編集ツール等）を用意しておくとスムーズに作成することができます。

クリッカブルマップの設定方法

手順としては以下の流れです。

###①画像を用意

index.html

<img src="hogehoge.jpg" usemap="#ImageMap" width="100%">

※usemap属性を設定しておきましょう。

###②リンク先を設置

index.html

<img src="hogehoge.jpg" usemap="#ImageMap" width="100%">

/* 以下を追記 */
<map name="ImageMap">
  <area href="https://hoge.com" shape="rect" coords="1,1,160,320">
  <area href="https://hogehoge.com" shape="rect" coords="161,1,320,320">
</map>

結果

解説

今回は画像を左右半分ずつ別のリンクを貼るような設定をしています。

まず画像にusemap属性の値を#付きで設定。そしてmapタグのnameに同じ名称を設定します。

<img usemap="#ImageMap"> <map name="ImageMap"> ←同じ名称を設定※imgタグのほうは#を付ける。

そしてmapタグの中に設置したいリンクの数を同じ分だけのareaタグを設置します。

<area href="リンク先" shape="形状" coords="範囲">

これで完了です。
形状には3種類あり、四角、多角形、丸の3つがあります。

・四角　：shape="rect"
・多角形：shape="polygon"
・丸　　：shape="circle"

範囲は始点と終点の座標を指定します。（多角形の場合は頂点の数分指定）

・四角　： coords="始点横(X),始点縦(Y),終点横(X),終点縦(Y)"
・多角形：coords="座標1横(X),座標1縦(Y),座標2横(X),座標2縦(Y)・・・・・"
・丸　　：coords="中心点横(X),中心点縦(Y),周の横(X),周の縦(Y)"

注意

座標はpxでの指定しかできないので、レスポンシブ対応するには2種類PC用とスマホ用を用意する必要があるかもしれません。使用時には使用場所や大きさに注意してください！

まとめ

とても便利なクリッカブルマップですが、pxでの指定しか対応していないので使いどころが限られてしまうのが難点。よく使われるのは日本地図なんかにざっくりエリアごとや都道府県ごとのクリッカブルマップを設定していたりするのにもみられます。

イメージマップジェネレータ―などもあるので作成が難しい場合はツールを使ってスムーズな開発を行ないましょう。

・イメージマップジェネレータ―
http://labs.d-s-b.jp/ImagemapGenerator/

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ