All geek questions in one place

How to overlay an icon / image on another image when submitting a form?

So, I'm trying to add an icon to the image as soon as someone “marked” a part of the image, that is, submitted a form.

How to do it 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 the form field. You enter the information you want, and then, after you have done this, a small image will appear on the image that shows where you left the 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>

, , - ( , , ). , (), () ... "". , -, . (), jQuery, .

+3
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 being edited

: // , . , , AJAX , . , , .

, , CSS 2- , .

2: , . , , SubmitTag, ( , targetX targetY ) .

+4

Source: https://habr.com/ru/post/1743677/

More articles:


All Articles