Jquery 如何在提交表单时将图标/图像覆盖到另一个图像上？_Jquery_Css

Jquery 如何在提交表单时将图标/图像覆盖到另一个图像上？

jquery css

Jquery 如何在提交表单时将图标/图像覆盖到另一个图像上？,jquery,css,Jquery,Css,因此，一旦有人“标记”了图像的一部分，也就是说，他们提交了表单，我就尝试在图像中添加一个图标在jQuery中如何做到这一点想清楚一点，假设你在flickr上看到一张图片。如果要添加批注，请单击所需的图像，它会显示一个表单字段。你输入你想要的信息，然后在你输入信息之后，在图片的顶部会留下一个小图像，显示你在哪里留下了评论有什么想法吗编辑-参见代码： <script type="text/javascript"> $(function() {

因此，一旦有人“标记”了图像的一部分，也就是说，他们提交了表单，我就尝试在图像中添加一个图标

在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>


$（函数（）{
var tag_box=$（“”）.appendTo（“body”）.css({
“宽度”：“40px”，
“高度”：“40px”，
“边框”：“4px实心#000000”，
“位置”：“绝对”，
“显示”：“无”，
“填充”：“15px”
});
var comment_box=$（“”）.appendTo（tag_box）.css（{“position”：“absolute”}）；
变量注释图标=$（“”）；
$（“#图像包装器”）.live（“单击”，函数（e）{
tag_box.css({
“左”：e.pageX-40，
“顶级”：e.pageY-40，
“显示”：“块”
})
.after（comment_box.css({
“左”：e.pageX-65，
“顶部”：e.pageY+40
}));
返回false；
});
$（“表格”）。提交（函数（）{
var params=$（this.serialize（）；
$（“表单”）[0]。重置（）；
返回false；
});                 
});

我试图做的是当用户单击一个区域时（他们看到一个方形框，显示他们标记的位置）。然后他们输入注释，注释存储在一个变量中（目前），但是我想用一个图像标记（图像的）区域……在本例中，它是一个“星号”。所以我想解决方案必须知道坐标或者添加注释的位置。我一直在研究offset（），但我对jQuery比较陌生，很难将这些片段组合起来。

一个简单、透明的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

$icon=$（“”）；
$（“#img_list li.active”）.append（$icon）；//假设您在正在编辑的项目上设置了活动类

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

此外，如果有很多不同的图标，您应该使用CSS精灵，并在图标中添加第二个类，以确定使用哪个精灵

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

这是很棒的Zack。我在原始问题中添加了一些代码片段，以提供更多的上下文。期待看到你的想法：）我添加了一个链接，可以为你提供更多关于如何做到这一点的信息。他们说得比我好。太好了。我可以为此吻你……但我不会：）别让我抱太大希望！；）另外，如果它在我忘记接受的兴奋中起作用，不要忘记接受它。这不仅仅有效。相信我…这是史诗！！！