如何在表单提交时将图标/图片叠加到另一张图片上？

Question

如何在表单提交时将图标/图片叠加到另一张图片上？

3

我正在尝试在图像上添加一个图标，一旦有人“标记”了图像的一部分-即他们提交了表单。我该如何在jQuery中实现这个功能？简单来说……想象一下你在flickr上看到一张图片。您想添加注释，请单击要添加注释的位置，然后它会显示一个表单字段。输入所需信息后，图片上方会留下一个小图标，显示您留下评论的位置。有什么想法吗？编辑-请参见代码：

    <script type="text/javascript">

        $(function() {
                var tag_box = $("<div>").appendTo("body").css({
                    "width": "40px",
                    "height":"40px",
                    "border":"4px solid #000000",
                    "position":"absolute",
                    "display":"none", 
                    "padding":"15px"
                    });

            var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"});

            var comment_icon = $("<img src='images/asterisk_yellow.png' width='16' height='16' alt='Comment'>");

            $("#image-wrapper").live("click", function(e) {
                tag_box.css({
                    "left": e.pageX - 40,
                    "top": e.pageY - 40, 
                    "display": "block"
                    })
                .after(comment_box.css({
                    "left": e.pageX - 65,
                    "top": e.pageY + 40
                    }));
                 return false;  
                });

                $("form").submit(function() {
                    var params = $(this).serialize();

                    $("form")[0].reset();

                    return false;
                });                 
            });     
</script>

<body>
<div align="center">  

    <img src="images/image1.gif" width="760" height="182" alt="image1" id="image-wrapper">

</div>
</body>

我想实现的功能是，当用户点击一个区域（他们会看到一个方框，告诉他们他们要标记的位置），然后输入评论，并将评论存储在变量中（目前只是这样），但我希望能够用图像标记图像的区域。在这种情况下，它是一个“星号”。所以我想解决方案必须知道添加评论的坐标或其他信息。我正在研究offset()，但我对jQuery相对较新，很难将所有部分组合在一起。

- marcamillion

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zack · Accepted Answer

一个简单、透明的PNG就可以了。假设你的包含图像列表的标记如下所示：

<ul id="img_list">
    <li>
        <img src="image.jpg" alt="Image Title" />
        <img class="icon" src="annotation.png" alt="You've done XYZ to this." />
    </li>
    <!-- List continues... -->
</ul>

您可以这样设置样式：

#img_list li {
    display: block;
    width: 50px;
    height: 50px;
    position: relative;
}

#img_list .icon {
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

如果您想在jQuery中动态添加它，可以在表单提交成功的回调函数中执行以下操作：

$icon = $("<img class='icon' src='annotation.png' alt='You've done XYZ to this.' />");
$("#img_list li.active").append($icon); // assuming you set class active on the item that's being edited

编辑：确切的功能/样式/标记取决于您的网站外观。由于用户正在浏览图片，我想您需要使用AJAX提交表单，以便他们不会失去位置。如果您有一些代码，我可以查看，我可以更加精确。

此外，如果有许多不同的图标，您应该使用CSS sprites并为确定使用哪个sprite的图标添加第二个类。

编辑2：这里有比我更多的信息。您只需要在此处修改一些代码即可获得所需的效果，但是您可以很容易地将透明的星号作为SubmitTag函数的一部分添加，您只需要提取目标位置（我认为他使用变量targetX和targetY）并在标签图标上设置左和右。