0

我正在开发一个智能手机应用程序，我试图在图像上放置一个“注释”或“标记”。我还没有一个潜在的解决方案，我是从这个类的东西开始的。

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

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

谢谢！

4

3 回答 3

1

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

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

如果图像需要在图像标签中，则为宽度和高度。

干杯，

戴夫

于 2012-09-27T12:23:12.087 回答
1

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

于 2012-09-27T12:23:20.143 回答
1

Here's some code:

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

Copy paste this into a new file and open it on your browser. In this example I move a div to the position, but you'll have to clone it if you want multiple points

Try it on jsfiddle

于 2012-09-27T12:09:27.877 回答