引导图像使用映射响应

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