昔ほど見なくはなりましたが、今でもデザイナーからクリッカブルマップのデザインが回ってくることがあります。
「レスポンシブ時にクリッカブルエリアがズレちゃうんだけど〜〜〜？」と文句を言いたくなりますが、結構簡単にレスポンシブ対応できたので、メモ。
既存サイトに増設で組み込む場合、jQueryの使用バージョンの兼ね合いと調整が面倒くさいので、jQueryプラグインは極力使いたくない。
というか、使わなくて問題ないなら使わなくてもいいじゃないか！ という訳で、Image Map Resizerを使ってクリッカブルマップをレスポンシブ対応させてみたいと思います。
目次
step1: ジェネレーターを使ってクリッカブルマップを作成する
やり慣れている方法があればこのstep1は飛ばしても構いませんが、このジェネレーターを使うと「もうこのツールでいいかな？」という気になります（なりました）。
日本人が開発したから日本語だし、簡単に使えるオンラインツールなので解説すら必要ないくらいですが、ナレッジ整理ということで。
- 画面上にクリッカブルマップに使いたい画像をドラッグしてアップロード。
- 四角、円、多角形、それぞれのクリッカブルエリアの形状に合わせて右上のメニューをクリックし、クリックエリアを作成。
- 右側にコードがはき出されるので、コピペして使う。
これだけ。ありがたい。
実際に貼ってみる（レスポンシブ非対応版）
PC閲覧の方は画像の朱色のところがクリック範囲になりましたね。
SPで閲覧、あるいは画面幅を760px以下くらいに狭めてみると、せっかく設定したクリック範囲がズレてしまっています。
次のステップでこれを調整しましょう。
step2: Image Map Resizerを導入する
なんとIEにも対応してますね。これまたありがたい。
JavaScriptを読み込む
JavaScriptの読み込みは以下から慣れたやり方でどうぞ。
GitHubからダウンロードする場合
imageMapResizer.min.jsを使います。任意の場所に格納し、閉じbodyタグの直前にリンクを設置します。以下はドメイン直下の
/js/に格納した場合の例です。
<script src="/js/imageMapResizer.min.js"></script>CDNから読み込む場合
この記事を作成している段階ではバージョン1.0.10なので以下のコードです。
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>実行スクリプトの記述
冒頭でjQueryを使わない云々書きましたが、実はJSで記述してもjQueryで記述してもいいんです。
JavaScriptで記述する場合
<script>
imageMapResize();
</script>jQueryで記述する場合
jQeryを読み込んだ後に記述します。
読み込む順番として、jQuery→imageMapResizer.min.js→以下の記述となります。
<script>
$('map').imageMapResize();
</script>実装したデモページ
JavaScriptで記述したデモページ
jQueryで記述したデモページ
上記デモではクリックしても何も起きない作りですが、実際の案件ではSPで閲覧したときもクリック範囲やクリック時の挙動を分かりやすくデザインする必要がありますね。