Question

我对Web应用程序编程完全陌生，尽管我已经使用Windows应用程序开发了一段时间。我使用aspx页面和Javascript在Visual Studio 2010中工作。我正在尝试建立一个论坛风格的网站，其中一个功能是允许用户显示扫描的文档，单击文档并将另一个图像放在第一个文档的顶部，该文档将引用要输入的注释那个用户。类似于脚注。我已经能够获得用户点击文档的位置的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>

Answer 1

pos_x和pos_y是Number。元素使用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/

图像分层如何

1 个答案: