title: Hide Image MAP and display Image MAP for new image
body: <p>I have searched for this a lot but could not find answer ...</p>
  
  <p>(I searched in google 'How to hide image map area')</p>
  
  <p>I am using </p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-2.0.3.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>Link for image for which this Image map created</p>
  
  <p><a href="http://webvikas.net.in/befaft/images/index-03.png" rel="nofollow noreferrer">http://webvikas.net.in/befaft/images/index-03.png</a> 
  <img src="https://i.stack.imgur.com/0uG9H.png" alt="enter image description here"></p>
  
  <p>Image Maping....(for above image)</p>
  
  <hr>
  
  <pre><code>&lt;map name="Map" id="Map1"  &gt;
  
  
  &lt;area shape="rect" coords="28,134,225,324" href="#" id="printingservice.php" alt="Printing Service" class="serviceclass" style="display:none"&gt;
  
  
   &lt;area shape="rect" coords="278,311,472,494" href="#" id='awardwork.php' alt="Award Works" class="serviceclass" style="display:none"&gt;
  
  
  
  &lt;area shape="rect" coords="538,343,734,534" href="#" id='onsitestudio.php' alt="Onsite Studio" class="serviceclass" style="display:none"&gt;
  
  
  
   &lt;area shape="rect" coords="759,314,962,497" href="#" id='webservices.php' alt="Web Services" class="serviceclass" style="display:none"&gt;
  
  
  
   &lt;area shape="rect" coords="716,107,905,295" href="#" id='graphicdesigning.php' alt="Graphic Designing" class="serviceclass" style="display:none"&gt;
  
  
  
   &lt;area shape="rect" coords="505,142,694,324" href="#" id='artworkadaption.php' alt="Artwork Adaption" class="serviceclass" style="display:none"&gt;
  
  
  
  &lt;area shape="rect" coords="246,102,447,286" href="#" id='imageediting.php' alt="Image Editing" class="serviceclass" style="display:none"&gt;
  
  
  
  &lt;area shape="rect" coords="67,337,255,524" href="#" id='printproduction.php' alt="Print Production" class="serviceclass" style="display:none"&gt;
  
  &lt;/map&gt;
  </code></pre>
  
  <hr>
  
  <p>When user click on 
      $('.serviceclass').click</p>
  
  <p>i am displaying </p>
  
  <p><a href="http://webvikas.net.in/befaft/images/index-up-03.png" rel="nofollow noreferrer">http://webvikas.net.in/befaft/images/index-up-03.png</a>
  <img src="https://i.stack.imgur.com/d2A0G.png" alt="enter image description here">
  which is smaller one than previous one </p>
  
  <p>Obviously i donot want (I want to hide) the earlier image MAP) or Image MAP created for this image and display new image MAP  for the smaller image</p>
  
  <p>please help</p>
  
  <p>I tried </p>
  
  <pre><code>&lt;map name="Map" id="Map1" style="display:none"&gt;
  </code></pre>
  
  <p>does not work</p>
  
  <p>Also tried </p>
  
  <pre><code> $('.serviceclass').hide();
  $('#Map1').hide();
  </code></pre>