我正在开发一个智能手机应用程序,我试图在图像上放置一个“注释”或“标记”。我还没有一个潜在的解决方案,我是从这个类的东西开始的。
我正在使用http://www.icenium.com/进行应用分发。
是否可以点击/单击某处并添加一个元素(div)以始终使用javascript在图像上的该点?
谢谢!
我正在开发一个智能手机应用程序,我试图在图像上放置一个“注释”或“标记”。我还没有一个潜在的解决方案,我是从这个类的东西开始的。
我正在使用http://www.icenium.com/进行应用分发。
是否可以点击/单击某处并添加一个元素(div)以始终使用javascript在图像上的该点?
谢谢!
我想这一切都取决于元素的相对和绝对定位。然后你需要遍历所有图像并获取图像宽度和高度的变量,然后找到图像的顶部位置。然后,当您单击按钮时,您可以使用所有这些来定位您的“注释”。
这是 JS Fiddle,它应该更好地解释 - http://jsfiddle.net/davemcmillan/6cEEy/
如果图像需要在图像标签中,则为宽度和高度。
干杯,
戴夫
如果我理解正确,您希望将某种工具提示放置在用户单击的确切位置。下面是一个如何使用 jQuery 做到这一点的简单示例:http: //jsfiddle.net/QDJGc/。
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