0

新しいプロジェクトでレスポンシブ HTML デザインを構築しようとしています。HTMLマップ以外はすべて問題ありません。HTML マップと背景の PNG 画像を動的に生成する方法を発見したので、サーバー側の柔軟性は問題になりません。しかし、クライアントの柔軟性を (CSS、HTML、または JS によって) 得る方法はありますか?

4

1 に答える 1

0

私は自分の質問にもう一度答えます))) 多分私の解決策は誰かに役立つでしょう...

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

NaturalWidthはOpera と IE でサポートされていないため、 GLOBAL_WIDTHはハードコードされています。マップがスケーリングされて表示され、europe.pngの絶対幅を知る必要があるため、幅も使用できません。そのため、マップは完全に柔軟になりました。John S. Urbanの調査に感謝します。

于 2012-04-11T05:25:07.293 に答える