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 his research。

在浏览器中灵活的HTML地图

1 个答案: