將座標放置在座標上的Javascript /百分比

我正在開發一款智能手機應用程序，我試圖在圖像上放置「註釋」或「標記」。我還沒有一個可行的解決方案，我正在開始這個新事物。將座標放置在座標上的Javascript /百分比

我正在使用http://www.icenium.com/作爲應用程序分配。

是否有可能點擊/點擊某處並添加一個元素（div）始終在JavaScript上的圖像上的那一點？

謝謝！

2012-09-27 zomboble

在這個問題上的任何進步？ – JSantos

下面是一些代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <script language="JavaScript"> 
      function point_it(event){ 
       pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft; 
       pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop; 
       document.getElementById("imgcr").style.left = (pos_x-7)+"px" ; 
       document.getElementById("imgcr").style.top = (pos_y-8)+"px" ; 
       document.getElementById("imgcr").style.visibility = "visible" ; 
       document.pointform.form_x.value = pos_x; 
       document.pointform.form_y.value = pos_y; 
      } 
     </script> 
    </head> 
    <body> 
    <form name="pointform" method="post"> 
     <div id="pointer_div" onclick="point_it(event)" style = "background-image:url('http://www.woofers.net/communities/6/004/008/640/226/images/4555331877.jpg');width:500px;height:333px;"> 
     <img src="http://galeriejeanclaudebergeron.ca/images/redDot.png" id="imgcr" style="position:relative;visibility:hidden;z-index:2;"></div> 
     You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" /> 
    </form> 
    </body> 
</html>

複製粘貼到一個新的文件，並打開它在你的瀏覽器。在這個例子中，我移動DIV的位置，但你必須，如果你想多點

克隆它嘗試在jsfiddle

來源

2012-09-27 12:09:27 JSantos

我想這將一切都只是下降到的相對和絕對定位元素。然後，您需要遍歷所有圖像並獲取圖像寬度和高度的變量，然後找到圖像的頂部位置。然後，您可以使用所有這些在您點擊按鈕時定位「註釋」。

這裏是JS小提琴，應該更好地解釋 - http://jsfiddle.net/davemcmillan/6cEEy/

的寬度和高度，如果圖像需要在圖像標籤。

乾杯，

戴夫

來源

2012-09-27 12:23:12 davemcmillan

如果我理解你的權利，你要放在一個確切的地方，用戶點擊某種工具提示。以下是一個簡單的使用jQuery的例子：http://jsfiddle.net/QDJGc/。

來源

2012-09-27 12:23:20 Zemljoradnik

感謝您的回答！有沒有辦法存儲數據（在數據庫中），所以當你重新加載他們在同一個地方的頁面？謝謝！ – zomboble

是的，但沒有單獨的JavaScript。根據您的需要，您可以使用AJAX將數據發送到您的服務器端應用程序，該應用程序可以將其存儲在數據庫中，然後使用它在頁面重新加載後生成HTML;或者如果您需要爲每個用戶存儲更長時間的數據，則可以使用Cookie。還有其他的可能性，但這兩個可能是最有用的。 – Zemljoradnik

將座標放置在座標上的Javascript /百分比

回答

相關問題