Jquery Image Mapping

這個想法是我爲幾個地理位置設計了一個監測系統。令人討厭的是，用戶問題，帳戶與網絡問題等是分離的。工程師們只是處理網絡問題，但對地點幾乎沒有見解。所以我想對此進行直觀的瞭解......我無法通過簡單的方式操作平面圖或校園地圖來驗證數據。 Voila！Jquery Image Mapping

不能說我對stackoverflow的幫助留下了深刻的印象...我多次重申我的問題，但一直保留在它，並最終找到我自己的方式...希望這可以幫助某人，請評論，如果有任何改進。接下來的事情是先提交表格的帖子，如果我們說我們有一個7層的建築物，房間從100到150; 200到250等，該數組將autoform的方塊，所以我只需要操縱大小和尺寸。定製會很好。之後更新'標籤'。但我想在:)

function addFormField(post) { 
      var x=0; 
      while(x<post){ 

      var id = document.getElementById("id").value; 
     // $("#divTxt").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + "&nbsp;&nbsp;<input type='text' size='20' name='txt[]' id='txt" + id + "'>&nbsp;&nbsp<a href='#' onClick='removeFormField(\"#row" + id 
    + "\"); return false;'>Remove</a><p>"); 
      $("#divTxt").append("<p class='box' id='row" + id + "'>" + id 
    + "<p>");  
      $('#row' + id).highlightFade({ 
       speed:500 
      }); 

       $("#map").droppable({ 
       drop: function() { 
       /// 

     //  $("#final :span").each(

      $("#final").append("<br/><span style='padding-left:10px'><input name='final"+id+"' id='final"+id +"' type='text' size='19'></span><span style='padding-left:22px'>"+ $("#x-coordinate").text()+"</span><span style='padding-left:15px'>"+ $("#y-coordinate").text()+"</span><span style='padding-left:15px'>"+ width 
    +"</span><span style='padding-left:35px'>" + height+"</span>"); 


       ///// 
       } 
      }); 

      $("#row"+ id).resizable(

      ); 
      $("#row"+ id).draggable({ 

     drag:function(){ 
      width = $(this).width(); 
      height = $(this).height(); 


      }, 
      containment: '#map', scroll: false 

      }); 

      id ++; 
      document.getElementById("id").value = id; 
      x++; 

} 
} 

function removeFormField(id) { 
    $(id).remove(); 
} 

</script> 

<body id="body"> 
<div id="contain" style="width: 802px; height:769px; border:2px solid #ccc; margin-left:100px"> 
<img src="tip/ITHNY-campus.JPG" width="790px" height="760px" border="0" id="map"> 
</div> 


<a href="#" onClick="addFormField(1); return false;">Add</a> 
<form action="#" method="get" id="form1"> 
<input type="hidden" id="id" value="1"> 
<div id="divTxt"></div> 
<p><input type="submit" value="Submit" name="submit"> 
<input type="reset" value="Reset" name="reset"></p> 
</form> 
<br/> 
<table><tr> 
<td>X:</td><td><pre id="x-coordinate" style="display:block"></pre></td></tr> 
<tr><td>Y:</td><td><pre id="y-coordinate"></pre></td></tr></table> 
<br/> 
<div id="final"> 
<table border="1"> 
<tr> 
<th width="144">Name</th> 
<th width="36">X</th> 
<th width="36">Y</td> 
<th width="36">W</th> 
<th width="70">H</th> 
</tr> 
</table> 

</div>

來源

2010-03-02 Peter G Mac.

動，我不知道這是否會與您的問題有所幫助，但在任何情況下： jQuery是選擇爲基礎的，所以用它代替標識類（刪除＃隨處可見，並將相應的ID /名稱屬性更改爲類屬性），並且您的代碼將更通用，因此更易於重用和維護。

來源

2010-03-02 18:05:47 reinierpost

Thankyou的說明，但我發現你的評論非常廣泛。我對Jquery的主要關注是id是動態的。我還聽說過幾個關於避免階級與階梯的事情。很少有人說。 – 2010-03-07 16:06:05

Jquery Image Mapping

回答

相關問題