.txtファイルをHTMLイメージマップに読み込みます

Question

私はHTMLの初心者です。キャンバスがグリッドに分割されているウェブページを作成しています。ユーザーは、グリッド内の長方形の上にマウスを置いて強調表示することができます。

私は四角形の座標が.txtファイル（各行に4つの座標がスペースで区切られています）に格納されており、ファイルごとに行単位で読み込み、それらを私のコードに変数として入力したいと考えていますPython。

<area shape="rect" coords="xmin,xmax,ymin,ymax" href="#"...> 

アドバイス/手作業で入力する座標が多すぎるため、アドバイスをお願いします。

Answer 1

あなたが探しているものはAJAXです。あなたは次のようなものを使うことができます。

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "coords.txt", true); 

xhr.onload = function(e) { 
    if(this.status == 200) { 
     // get text contents 
     var coords = this.responseText.split("\n"); 
     coords.forEach(function(coord) { 
      // create new area element 
      var area = document.createElement("area"); 
      area.shape = "rect"; 
      area.coords = coord.replace(/ /g,","); // replace spaces with commas 
      area.href = "#"; 

      // get your map element somehow 
      document.getElementById("myMap").appendChild(area); 
     }); 
    } 
}; 

xhr.send();