我对Web应用程序编程完全陌生,尽管我已经从事Windows应用程序开发一段时间了。我在Visual Studio 2010中使用aspx页面和Javascript。我正在尝试建立一个论坛风格的网站,其中一个功能是允许用户显示扫描的文档,单击该文档并在第一个文档的顶部放置另一个图像,该图像将引用该用户要输入的注释。类似于脚注。我已经能够获得用户单击文档的位置的 xy 坐标,但无法将小脚注图像放置在鼠标单击的坐标处。我已经搜索了很多方法来做到这一点,但没有找到任何我能够适应我特定需求的东西。我必须获取坐标并尝试在表单上放置"Image1"的代码如下。我也愿意接受任何关于更好方法来注释上传表单的建议。任何帮助将不胜感激。
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ImageTestaspx.aspx.vb" Inherits="Coder2Coder.ImageTestaspx" %>
<!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 runat="server">
<title></title>
<script type="text/javascript">
function onMousebtClick(event) {
//right click, capture coordinates of click
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("Image1").style.left = (pos_x);
document.getElementById("Image1").style.top = (pos_y);
document.getElementById("Image1").style.visibility = "visible";
//alert(pos_x,pos_y);
//break;
}
</script>
</head>
<body>
<form name="form1" method="post" runat="server">
<div id="pointer_div" onclick="onMousebtClick(event)" style="background-image:url('/images/holhours.bmp');width:899px;height:718px;">
<img src="/images/1.jpg" alt="No Image" id="Image1" style="position:relative;visibility:hidden;z-index:2;" />
</div>
</form>
</body>
</html>
pos_x
和 pos_y
是 Number
s. 元素使用带有某些单位的 String
s 设置样式。你错过了px
.
改变
document.getElementById("Image1").style.left = (pos_x);
自
document.getElementById("Image1").style.left = (pos_x + "px");
和
document.getElementById("Image1").style.top = (pos_y);
自
document.getElementById("Image1").style.top = (pos_y + "px");
图像元素还需要绝对放置在相对位置的容器中。
演示:http://jsfiddle.net/m994sr2d/1/