イメージマップを作成
１.【HTML Imagemap Generator】を使ってクリッカブルを作成
下記リンクで使用する画像をドロップし、リンクを作成してください。
https://labs.d-s-b.jp/ImagemapGenerator/
レスポンシブに対応させる
2.『RWD Image Maps』をダウンロードもしくはCDNを使用
ダウンロード方法
ダウンロードファイルの中で必要なファイルは以下の1点です。
- jquery.rwdImageMaps.min.js
ダウンロードしたファイルを使用する場合
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>CDNを使用する場合
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>jQuery【共通】
$(function(){
$('img[usemap]').rwdImageMaps();
});