响应式图像中的地图标签不会更新

Question

我从带有bootstrap 3的地图开始，我想使用地图区域在图像中制作两个链接，我使用以下内容：

<img src="img/bannerQhapacNanCompleto.jpg" alt="menu" class="img-responsive" usemap="#inscripciones" width="1280"  height="905">
<map name="inscripciones">
  <area shape="rect"  coords="77,415,590,891" alt="produccion" href="http://www.google.com">
</map>

当我使用电脑时它完美无缺，但在移动设备中，地图不起作用，请帮助我。 -UPDATE-- 我使用这段代码尝试，但我无法调整大小可以帮助我。

$( document ).ready(function() {
var ancho=$('#imagen').width(); 
var alto=$('#imagen').height();
var mediaX=ancho/2;var mediaY=alto/2;
var cuartoX=mediaX/2;
var cuartoY=mediaY/2; 
var x1=0;var y1=mediaY-cuartoY;
var coordenadas1="0,"+alto+","+mediaX+","+mediaY;
var coordenadas2=mediaX+","+mediaY+","+ancho+","+alto;
$('#produccion').attr( "coords", coordenadas1 );
$('#libroObjeto').attr( "coords", coordenadas2 );
});