So I am trying to add an icon to an image, once someone has 'tagged' a portion of the image - i.e. they have submitted the form.
How do I do that in jQuery?
Just to be clear...imagine you are on flickr and you see an image. You want to add an annotation, you click on the image where you want, and it shows you a form field. You enter the information you want to, then after you have done so, there is a small image left on top of the picture that shows where you have left a comment.
Any ideas?
Edit - See Code:
<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>
What I am trying to do is when the user clicks an area (they see a square box that shows them where they are tagging). They then enter the comment, and the comment is stored in a variable (for now), but then I would like to mark that area (of the image) with an image...in this case it is an 'asterisk'. So I imagine the solution would have to know the coordinates or something where the comment was added. I was looking into offset(), but I am relatively new to jQuery and am having a hard time putting the pieces together.