ブラウザのフレキシブルなHTMLマップ

Question

私は、新しいプロジェクトでレスポンシブなHTMLデザインを構築しようとしています。 HTMLマップ以外はすべて正常です。バックグラウンドのPNG画像と同様にHTMLマップの動的生成方法を発見したので、サーバー側の柔軟性に問題はありません。しかし、クライアントの柔軟性を得る方法はありますか（CSS、HTML、またはJSを使用して）？

Answer 1

I）は、再び自分の質問に答える））多分私の解決策は、誰かのために有用であろうnaturalWidthはオペラやIEでサポートされていないので...

<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は、ハードコーディングされています。 幅も使用できません。地図が縮尺されて表示され、europe.pngの絶対幅を知る必要があるためです。 地図は完全にフレキシブルです！ his researchのJohn S. Urbanに感謝します。