ブートストラップイメージusemap responsive

Question

ブートストラップに対応したイメージを作成したいと思います。問題は、私がクラスimg-responsiveを使用して、usemapがもう使用できなくなったときです。

<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> 

私は、誰かが私を助けることを願って心から デニス。

Answer 1

ありがとうアンドリュー、私はそれを見つけました。解決策は：

は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()})}(); 

と、これを：それに人を探しているため

再び

<script> 
     imageMapResize(); 

    </script> 

感謝：D