<map> imagem responsiva

Resposta em: http://pt.stackoverflow.com/a/195157/11886

HTML

<script src="https://rawgit.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js"></script>
<img class="minhaImg" src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="#">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="#">
  <area shape="circle" coords="124,58,8" alt="Venus" href="#">
</map>

CSS

.minhaImg {
    width: 100%;
    height: auto;
}

JavaScript

$(document).ready(function(e) {
    $('.minhaImg[usemap]').rwdImageMaps();
});

$('area').on('click', function() {
    alert($(this).attr('alt') + ' clicked');
});