クリッカブルマップってのはあんまりつかわなくなったんですが、たまに使いたいって言われることがあるので調べてみたのでメモ
クリッカブルマップでレスポンシブの対応の定番は 「jQuery RWD Image Maps」 だそうですね。
まぁ、脱jQueryって状態のいまでいまさら使いたくないですよね。
それにiPhoneとかでバグがあるらしいので、それでは使えないわけであります。
そんなこんなで調べてみた

• jQuery非依存
• 軽量

こういう触れ込みの 「image-map-resizer」 をみつけたんで試してみるよね。
とりあえずはクリッカブルマップをつくってね。

HTML Imagemap Generator

まずは作るの面倒なのでジェネレーター使って簡単につくってください。
Dreamweaver使ってた時代はそれでつくってましたけどね。
それは置いといてジェネレーターの流れは

1. 画像をドラッグ・アンド・ドロップする
2. シェイプツールでクリック範囲を指定
3. HTMLをコピーしてくる

これでクリッカブルマップの部分は完了ですね。

あとは 「image-map-resizer」 を設置します。
どりゃ！

<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<script>
  imageMapResize();
</script>

これだけ！
特に難しいこともないので、試してみてください。
jQueryにも対応してるみたいですが、使わないのでスルーですｗ
今回はほんまに簡単でしたね。
ってことで、廃れていくであろうけどもクリッカブルマップを使いたいって言われたときにでも使ってみてください。