Home/ Questions/Q 754323
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T14:59:56+00:00

So I am trying to replicate Facebook’s picture tagging functionality, and I have the

  • 0

So I am trying to replicate Facebook’s picture tagging functionality, and I have the functionality that onClick, a box is created and there is a comment box.

Now the issue is that I want to be able to (without doing any back-end processing) take the input from the input field and add it in some form to the underlying image area that they have selected. I would also like to add a small image to that area, that shows that a comment is there.

How do I do that?

See the code below for what I have for the comment box:

<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"});            

        $("#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
            }));

            });

        });


</script>
<body>    
<div align="center">  

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

    </div>
</body>

Now…whenever the user presses enter, the info in the comment box is appended to the URL like so:

.html?comment=comment value#

Thanks

Edit: My bad…I left out HTML…I have appended it to the script tag above.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This may not be the best solution, but do give it a try 🙂

    <script type="text/javascript">
    $(function() {

        var tag_box = $("<div class=\"comment-box\"></div>").css({
                "width": "40px",
                "height":"40px",
                "border":"4px solid #000000",
                "position":"absolute",
                "padding":"15px"
        });

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

        $("#image-wrapper").live('click', function(e){
            if($(this).parent().find('.comment-box').length === 0) {
                $(this).parent().append(tag_box).css('top',182).find('input#comment').focus();
            }
            return false;
        });
        $(".comment-box").
            live('mouseenter mouseleave', function(event) {
                if(event.type == 'mouseout') {
                    $(this).remove();
                }
            })
            .find('form').live('submit',function() {
                var comment = $(this).find('input#comment').val();
                var wrapperOffset = $("#image-wrapper").offset();
                var commentBlock = '<div class="comment-block" style="position:absolute;color:white; display:block; float:left; clear:both; height:auto; width:760px; background:red;">' + comment + '</div>';
                var posTop = wrapperOffset.top;
                $(commentBlock).css({
                    'width' : 760,
                    'top' : posTop,
                    'left' : wrapperOffset.left,
                    'z-Index' : 100
                });

                if($("#image-wrapper").parent().find('.comment-block').length > 0) {
                    var lastBlock = $("#image-wrapper").parent().find('.comment-block:last');
                    var lastBlockOffset = $(lastBlock).offset();
                    $(commentBlock).insertAfter($(lastBlock)).css('top', lastBlockOffset.top + $(lastBlock).height() + 4);
                } else {
                    $(commentBlock).insertBefore('#image-wrapper');
                }

                $(this).parent().parent().find('.comment-box').remove();
                $(this).get(0).reset();
                return false;
            });
    });
</script>
<style>
#image_container { display:block; height:auto; width:760px;margin:0 auto; background:yellow;}
</style>
<body>
<div align="center">
    <div id="image_container">
        <img src="/images/image1.jpg" width="760" height="182" alt="test" id="image-wrapper">
    </div>
</div>
</body>

    Update :

    <style>
#image_container { display:block; height:auto; width:760px;margin:0 auto; background:yellow;}
</style>
<body>
<div align="center">
    <div id="image_container">
        <img src="/images/image1.jpg" width="760" height="182" alt="test" id="image-wrapper">
    </div>
</div>
    • 0