Question

我正在开发智能手机应用程序，我正在尝试在图像上放置“注释”或“标记”。我还没有找到一个可能的解决方案，我开始尝试这种新事物。

我正在使用http://www.icenium.com/进行应用分发。

是否可以点击/点击某处并使用javascript添加元素（div）以始终位于图像上的该点？

谢谢！

Answer 1

以下是一些代码：

<!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

上试用

Answer 2

我想这只会归结为元素的相对和绝对定位。然后，您需要遍历所有图像并获取图像宽度和高度的变量，然后找到图像的顶部定位。然后，当您单击按钮时，可以使用所有这些来定位“注释”。

这是JS小提琴，它应该更好地解释 - http://jsfiddle.net/davemcmillan/6cEEy/

图像需要位于图像标签中时的宽度和高度。

干杯，

戴夫

Answer 3

如果我理解正确，您需要将某种工具提示放在用户点击的确切位置。这是一个使用jQuery如何做到这一点的简单示例：http://jsfiddle.net/QDJGc/。

Javascript将元素放在坐标/百分比上

3 个答案: