图像分层如何

Image Layering How to

本文关键字：分层 图像      更新时间：2023-09-26

我对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/

相关文章：