Owl-Carousel with different image maps for each slide

[hot5g]

I am trying to figure out how to get owl-carousel to work with image maps. Below is the code I currently have in place however for some reason passing the usemap="map1" argument in the img tag and having the <map name="map1" id="map1" in the map section still won't allow the image map to work correctly. Any help is greatly appreciated!!

I am trying to figure out how to get owl-carousel to work with image maps. Below is the code I currently have in place however for some reason passing the usemap="map1" argument in the img tag and having the <map name="map1" id="map1" in the map section still won't allow the image map to work correctly. Any help is greatly appreciated!!

<section>
<!-- CAROUSEL -->    
<div id="carousel">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<img src="http://www.xXxXxXxXx.com/js/img/slide4.jpg" usemap="map1" width="2224" height="1213" border="0" />
<map name="map1" id="map1">
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:brad -->
<area shape="rect" coords="679,907,878,969" alt="Google Play" href="http://play.google.com/store/music/artist/xXxXxXxXx?id=Adnlhppu65pyhtnsdgcvgr5b5au&amp;hl=en" />

<area shape="rect" coords="903,906,1102,970" alt="ITunes" href="https://itunes.apple.com/us/artist/xXxXXx/id398109478" />
</map>
</div>
</div>
</div>
</section>