クリッカブルマップのレスポンシブ対応は「image-map-resizer」を使用するとスムーズ

1.まずは、ツールでクリッカブルマップを作成を作成

■HTML Imagemap Generator
https://labs.d-s-b.jp/ImagemapGenerator/

2.「image-map-resizer」を適用

以下からデータを取得

■image-map-resizer
　・Github　GitHub - davidjbradshaw/image-map-resizer: Responsive HTML Image Maps · GitHub
　・CDN　image-map-resizer - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

データをダウンロード、もしくはCDNをリンクし、「 imageMapResize();」を以下のようにbodyの閉じタグ直前あたりに記述する。
以下CDNを適用するコードです。

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

閲覧させていただいた記事です
・レスポンシブデザインでのクリッカブルマップの問題を『image-map-resizer』と『HTML Imagemap Generator』で解決！
・クリッカブルマップのレスポンシブ対応はjQuery非依存の「image-map-resizer」が良い感じだった