jQuery RWD Image Maps　レスポンシブ用イメージマップ　画像へ

イメージマップをレスポンシブ対応させる簡単3ステップ！

HTML Imagemap Generatorを使って簡単にイメージマップを作成する方法

イメ－ジマップを入れる際は　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>