Adding tag to photo

Asked

Viewed 86 times

2

I’m trying to add tags to a photo (like the facebook identification system), the error I’m having is this:

When I click on an image to put the tags the form first appears in the corner of my computer, not in the image coordinates. I’ve worked with these functions and it still doesn’t work inserir a descrição da imagem aqui

  $('body .jcontent').on('click', '.imgpost', function(e){
       var imgvalue = $(this).parent();
       valueX = e.pageX //- $(imgvalue).offset().left;
       valueY = e.pageY //- $(imgvalue).offset().top;
       var idimg = this.id;
       $('#tagit').css({top:valueY,left:valueX})
       $(imgvalue).append('<div id="tagit"><div class="box"></div><div class="name"><input type="text" name="txtname" class="w3-input" id="tagname" placeholder="Comente..." /><input type="button" name="w3-btn" value="Save" id="btnsave" /><input type="button" name="btncancel" value="Cancel" id="btncancel" /></div></div>');
       $('#tagname').focus(); //puts the cursor inside text-field

})
javascript jquery css image tags
  • 1

    try doing your DIV where the image is inserted as position relative, if that doesn’t work it would be nice to have your code in Plunker so we can help solve

  • You’ve already assigned $(this).parent() to the variable, then instead of $(imgvalue).append('...'); see if imgvalue.append('...'); can solve the problem.

1 answer

0

You can do with a relative div and the tag is Absolute, so it can be floating inside the relative div, in which case it would be the image.

In your code is informing the top and left before the element exists, you have to add the html element first and then inform what is the position.

Here based on your code: https://jsfiddle.net/0888bdev/2/

Browser other questions tagged javascript jquery css image tags

You are not signed in. Login or sign up in order to post.