html - 浏览器中的灵活 HTML 地图

Question

我正在尝试在一个新项目中构建响应式 HTML 设计。一切都很好，除了 HTML 地图。我发现了动态生成 HTML 地图以及背景 PNG 图像的方式，因此服务器端的灵活性不是问题。但是有没有办法获得客户端的灵活性（通过 CSS、HTML 或 JS）？

Answer 1

我再次回答我自己的问题）））也许我的解决方案对某人有用......

<script type="text/javascript">
    GLOBAL_ARRAYCOORDS= new Array();
    GLOBAL_WIDTH=1;
    GLOBAL_ARRAYAREAS= new Array();

    function getglobal(){ 
        GLOBAL_ARRAYAREAS = document.body.getElementsByTagName("AREA");
        GLOBAL_WIDTH= 600; //document.getElementById("mapimage").naturalWidth;
        for(var i = 0; i < GLOBAL_ARRAYAREAS.length; i++) {
            GLOBAL_ARRAYCOORDS[i]= GLOBAL_ARRAYAREAS[i].coords;
        }
    }

    function scaleArea() {   
        for(var i = 0; i < GLOBAL_ARRAYAREAS.length; i++) {
            ii=i+1;
            rescale= document.getElementById("mapimage").width/GLOBAL_WIDTH ;
            sarray=GLOBAL_ARRAYCOORDS[i].split(",");      
            var rarray =new Array();
            for(var j = 0; j < sarray.length; j++) {
                rarray[j]=parseInt(sarray[j])*rescale;  
                rarray[j]=Math.round(rarray[j]);
            }
            GLOBAL_ARRAYAREAS[i].coords=rarray.join(",");
        }
    }

    window.onresize = function() {
        scaleArea();
    };
</script>

<img src="/catalog/europe.png" id="mapimage" usemap="#sueurope" onload="getglobal(); scaleArea();" />
<map id="sueurope" name="sueurope">
    <area alt="ru" coords="296,1, 296,8, ..." href="/catalog/ru" shape="poly"/>
    <area ...
</map>

GLOBAL_WIDTH是硬编码的，因为Opera 和 IE 不支持naturalWidth 。我也不能使用宽度，因为地图是按比例缩放的，我必须知道europe.png的绝对宽度。所以，现在地图是完全灵活的！感谢 John S. Urban的研究。