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

```
<script type="text/javascript">
$(document).ready(function () {
$('.mapping').mouseover(function() {

 $(this).animate({
    width: "110%",
    height: "50%"
  }, 'slow');

});
});
</script>
</head>

<body>
<p>
<map id="ImgMap0" name="ImgMap0">
 <area alt="" coords="4, 14, 67, 34" id="a" class="mapping" 
 href="#" shape="rect" />
<area alt="" coords="5, 55, 70, 74" id="b" class="mapping" 
href="# shape="rect" />
....
<img alt="" class="auto-style1" height="529" src="Tools.jpg" 
width="800" usemap="#ImgMap0" /></p>

</p></body>

```

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?

JS Fiddle link
<https://jsfiddle.net/z2Lkf8p0/>