title: jQuery enlarge image map on mouse over
body: <p>I have an image over which I created hotspots for hyperlinks using image map. Now I need to enlarge/zoom over the images on mouse over. I have this so far</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
  $('.mapping').mouseover(function() {
  
   $(this).animate({
      width: "110%",
      height: "50%"
    }, 'slow');
  
  });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;p&gt;
  &lt;map id="ImgMap0" name="ImgMap0"&gt;
   &lt;area alt="" coords="4, 14, 67, 34" id="a" class="mapping" 
   href="#" shape="rect" /&gt;
  &lt;area alt="" coords="5, 55, 70, 74" id="b" class="mapping" 
  href="# shape="rect" /&gt;
  ....
  &lt;img alt="" class="auto-style1" height="529" src="Tools.jpg" 
  width="800" usemap="#ImgMap0" /&gt;&lt;/p&gt;
  
  &lt;/p&gt;&lt;/body&gt;
  </code></pre>
  
  <p>But the animate () is not working. Alert is being called so I know mouseover() is working. Any ideas for enlarging the area in image map?</p>
  
  <p>JS Fiddle link
  <a href="https://jsfiddle.net/z2Lkf8p0/" rel="nofollow">https://jsfiddle.net/z2Lkf8p0/</a></p>