Question

我有一张图片，我需要在不同的地方放置文字（通过用户输入）。

如果我右键单击图像，会弹出一个输入字段 - 无论我在字段上输入什么，都应该放在我右键单击的完全相同的位置。我可以在右键单击时获取x和y坐标，但不知道如何将文本（传感器ID在我的情况下）放置在这些坐标处。

（我使用右键单击功能的上下文菜单）

代码：

<html>

<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.contextMenu.js" type="text/javascript"></script>
<link href="css/jquery.contextMenu.css" rel="stylesheet" type="text/css"    />

<script type="text/javascript">

    $(document).ready( function() {

        // Show menu when #myDiv is clicked
        $("#myDiv").contextMenu({
            menu: 'myMenu'
        },
            function(action, el, pos) {

            var name=prompt("Sensor Id ","Enter Id here");

            if (name!=null){


            alert(
                'Sensor: ' + name + 'Action: ' + action + '\n\n' +
                'Element ID: ' + $(el).attr('id') + '\n\n' + 
                'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
                'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
                );


            }   

        });

    });

</script>

</head>

<body>

<div id="myDiv">
    Right click to add
     <div id='cid' class='container' style="height: 100%">
    <img src="./3.jpg">
    </div>
</div>

<ul id="myMenu" class="contextMenu">
    <li class="edit"><a href="#edit">Place</a></li>
</ul>

在上面的代码中，我只显示x和y坐标 - 应该能够将坐标+传感器ID转换为这些坐标处的文本（传感器ID）。

我该怎么做？

在特定坐标处将图像放在图像顶部

0 个答案: