画像にリンクを設置したい時どうしていますか？
HTMLの<map>タグを使用される方が多いかと思います。ですが、<map>タグだと「画像サイズが変わると、リンクのクリックエリアがズレてスマホで使いものにならない」という弱点があります。
そこで今回は、私が実務でも使っている、JSでイメージマップを完全レスポンシブ化してくれるライブラリ『image-map-resizer』の使い方を紹介します！
今回使用するライブラリ
画像のサイズ変更に合わせて、クリックエリアの座標を自動で再計算してくれる超優秀なライブラリです。
image-map-resizer
導入は非常に簡単です。以下のコードをHTMLの</body> タグの直前に貼り付けるだけで準備完了です！
<script src="https://unpkg.com/image-map-resizer@1.0.10/js/imageMapResizer.min.js"></script>
<script>imageMapResize();</script>画像＋リンクのhtmlを作成
まずは、画像内のどこにリンクを貼るかという座標データ（HTML）を作ります。
手動で計算するのは不可能ですので、私はいつも以下の無料ツールを使ってサクッと生成しています。
ツールで書き出したHTMLは、以下のような形になります。
<img src="sample.png" usemap="#ImageMap" alt="" />
<map name="ImageMap">
<area shape="rect" coords="324,6,640,203" href="#" alt="" />
<area shape="circle" coords="251,578,38" href="#" alt="" />
<area shape="rect" coords="146,266,411,527" href="#" alt="" />
</map>実装デモ
今回は、「日本地図の地方ごと（北海道、関東、関西など）に別々のリンクを貼る」というデモを用意しました。hoverを設定しているのでマウスを近づけてみてください。
まとめ
今回は、レスポンシブ対応のイメージマップ実装法を紹介しました。
「LP（ランディングページ）で、デザイン画像の中に細かくリンクを仕込みたい！」と言われたときに、これを知っているだけで作業時間を短縮できます！
日々実務の案件で忙しい毎日ですが、こうして学んだ内容をアウトプットしながら、一歩ずつプロとして成長していきたいですね。皆さんのコーディングの参考になれば嬉しいです！
