Question

所以我试图在图像中添加一个图标，一旦有人“标记”了图像的一部分 - 即他们已经提交了表单。

我如何在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相对较新，并且很难将各个部分放在一起。

Answer 1

一个简单，透明的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精灵并在图标中添加第二个类来确定要使用的精灵。

编辑2：This提供的信息比我能提供的信息多。你只需要在这里修改一些代码就可以得到你想要的效果，但是你可以很容易地添加透明的星号作为SubmitTag函数的一部分，你只需要拉出目标位置（我想他使用变量targetX和targetY）并在标签图标上左右设置。

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

1 个答案: