如何在表单提交中将图标/图像叠加到其他图像上？

所以我试图给图像添加一个图标，一旦有人'标记了'一部分图像 - 即他们已经提交了表单。如何在表单提交中将图标/图像叠加到其他图像上？

如何在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相对陌生，并且很难将这些部分放在一起。

来源

2010-05-02 marcamillion

一个简单，透明的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），并在标签图标上左右设置。

来源

2010-05-02 05:52:02 Zack

这真棒扎克。我在原始问题中添加了一些代码片段以提供更多的上下文。期待看到你想出的:) – marcamillion 2010-05-02 06:18:41

我已经添加了一个链接，可以给你更多的信息，如何做到这一点。他们说比我好。 – Zack 2010-05-03 05:40:04

完美。我可以吻你这个......但我不会:) – marcamillion 2010-05-03 05:54:13

如何在表单提交中将图标/图像叠加到其他图像上？

回答

相关问题