bootstrap image usemap responsive - html

Question

I would like to create an image responsive with bootstrap. The problem is when I use the class img-responsive then the usemap is not working anymore.
<div class="col-lg-6">
<img class="center-block" src="images/plattegrond.jpg" alt="IGS Plattegrond" id="changer" usemap="#igsmap" onclick="changeImage(this)">
<map name="igsmap">
<!-- De knoppen op de Plattegrond -->
<area shape="rect" coords="522,263,542,285" alt="stand 1" href="#" onclick='show(1);'>
<area shape="rect" coords="458,311,479,334" alt="stand 2" href="#" onclick='show(2);'>
<area shape="rect" coords="458,213,477,232" alt="stand 3" href="#" onclick='show(3);'>
<area shape="rect" coords="587,315,606,335" alt="stand 4" href="#" onclick='show(4);'>
<area shape="rect" coords="586,214,605,231" alt="stand 5" href="#" onclick='show(5);'>
<area shape="rect" coords="522,167,542,188" alt="stand 6" href="#" onclick='show(6);'>
<area shape="rect" coords="523,125,540,142" alt="stand 7" href="#" onclick='show(7);'>
<area shape="rect" coords="237,126,251,141" alt="stand 8" href="#" onclick='show(8);'>
<area shape="rect" coords="192,319,207,332" alt="stand 9" href="#" onclick='show(9);'>
<area shape="rect" coords="266,303,280,319" alt="stand 10" href="#" onclick='show(10);'>
<area shape="rect" coords="228,407,246,424" alt="stand 11" href="#" onclick='show(11);'>
</map>
</div>
I hope someone can help me out,
Sincerely Dennis.

Answer 1

Thanks Andrew, I found it. The solution was :
Add this to Javascript :
!function(){"use strict";function a(){function a(){function a(a,c){function d(a){var c=1===(e=1-e)?"width":"height";return Math.floor(Number(a)*b[c])}var e=0;i[c].coords=a.split(",").map(d).join(",")}var b={width:k.width/k.naturalWidth,height:k.height/k.naturalHeight};j.forEach(a)}function b(a){return a.coords.replace(/ *, */g,",").replace(/ +/g,",")}function c(){clearTimeout(l),l=setTimeout(a,250)}function d(){(k.width!==k.naturalWidth||k.height!==k.naturalHeight)&&a()}function e(){k.addEventListener("load",a,!1),window.addEventListener("focus",a,!1),window.addEventListener("resize",c,!1),window.addEventListener("readystatechange",a,!1),document.addEventListener("fullscreenchange",a,!1)}function f(){return"function"==typeof h._resize}function g(){i=h.getElementsByTagName("area"),j=Array.prototype.map.call(i,b),k=document.querySelector('img[usemap="#'+h.name+'"]'),h._resize=a}var h=this,i=null,j=null,k=null,l=null;f()?h._resize():(g(),e(),d())}function b(){function b(a){if(!a.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==a.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+a.tagName+">.")}function c(c){c&&(b(c),a.call(c),d.push(c))}var d;return function(a){switch(d=[],typeof a){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(a||"map"),c);break;case"object":c(a);break;default:throw new TypeError("Unexpected data type ("+typeof a+").")}return d}}"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&"object"==typeof module.exports?module.exports=b():window.imageMapResize=b(),"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a).end()})}();
and this on the bottom of the page :
<script>
imageMapResize();
</script>
again thanks for looking in to it guys :D