Question

I am trying to insert an Image on a HTML page on mouse button click. This image indicates a tag to open a sticky note. I am able to figure out how to insert an image at the mouse curse location. However, I am not sure if an image can be inserted anywhere on a HTML page. Can we overlay this image on the paragraph? Please help!

Answer 1

.overlay_img {
   position: absolute;
   z-index: 9999;
}

$('body').on('click', function(e) {
  $(this).append($('<img/>', {
                      className: 'overlay_img'
                      style: 'left: '+ e.pageX +'px; top: '+ e.pageY +'px',
                      src: 'SOMETHING',
                      alt: 'SOMETHING'
                   })
                );
});

you can also use:

$('body').on('click', function(e) {
   $(this).append('<img src="" class="something" alt="some" style="left: '+ e.pageX +'px; top: '+ e.pageY +'px"/>');
});

For example, I append the image to body, you can append it to any target.