イメ-ジマップを入れる際は Dreamweaverのマップは使わずに、 HTML Imagemap Generator からマップコードを造ってhtmiへはりつける
jsへのパスはheaderに入れると多分コンフリクトなのか機能しないからbodyに記載する
<div class="col-12 text-center my-5">
<img src="../n-image/koshinokanburi/item2.jpg" usemap="#ImageMap" alt="" class="img-fluid mx-auto"/></div>
<!--レスポンシブ用イメージマップ-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<map name="ImageMap">
<area shape="circle" coords="459,1617,86" href="https://www.chancemaker.co.jp" alt="" />
<area shape="rect" coords="597,2080,846,2262" href="https://coco-wa.jp" alt="" />
</map>
<script>
$('img[usemap]').rwdImageMaps();
</script>
</div>
イメージマップはローカルでは確認できない。サーバー下で確認
PC用とスマホ用に画像を2種入れた場合の表記の仕方
サンエツ/koshinokanburi
<div class="row justify-content-center text-center koshikanMainContent">
<div class="col-xl-10 col-12 text-center mt-lg-5 mt-3 d-md-block d-none">
<img src="../n-image/koshinokanburi/pc.jpg" usemap="#ImageMap" alt="越の缶ぶり" class="img-fluid mx-auto"/>
</div>
<div class="col-xl-10 col-12 text-center mt-lg-5 mt-3 d-block d-md-none">
<img src="../n-image/koshinokanburi/sp.jpg" usemap="#ImageMap2" alt="越の缶ぶり" class="img-fluid mx-auto"/>
</div>
<!--レスポンシブ用イメージマップ-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<map name="ImageMap">
<area shape="rect" coords="176,3031,856,3217" href="https://www.toyama-sakana.com/cat/fishes" target="_blank" alt="" />
<area shape="rect" coords="202,4035,794,4197" href="https://www.denkibuil.com" target="_blank" alt="" />
<area shape="rect" coords="267,5320,785,5494" href="#" data-toggle="modal" data-target="#yuki" alt="" />
</map>
<map name="ImageMap2">
<area shape="rect" coords="201,3326,639,3519" href="https://www.toyama-sakana.com/cat/fishes" target="_blank" alt="" />
<area shape="rect" coords="167,4461,675,4644" href="https://www.denkibuil.com" target="_blank" alt="" />
<area shape="rect" coords="193,6175,606,6350" href="#" data-toggle="modal" data-target="#yuki" alt="" />
</map>
<script>
$('img[usemap]').rwdImageMaps();
</script>
</div>