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

回答

相关问题