Would appreciate guidance on my goal of placing a div in the center of the mouse cursor upon clicking a link. Here's what I have so far:
<a id='btn' href='#' ><img src='test.png' /></a>
I want the new div to overlay on top of 'test.png', with the mouse cursor positioned centrally both vertically and horizontally within the div.
This is my current JavaScript setup:
var contentDiv = document.createElement('div');
var img = document.createElement('img');
contentDiv.setAttribute('class','test1');
img.src='newimg.png';
contentDiv.appendChild(img);
$("#btn").on('click', function(e){
$('body').append(contentDiv)
var w = $(contentDiv).width()/2
var h = $(contentDiv).height()/2
var x = e.pageX - h //- $(this).offset().left;
var y = e.pageY - w //- $(this).offset().top;
$(contentDiv).css({top: y, left: x, 'transform': 'scale(.2)'})
e.preventDefault();
})
However, the code does not position the mouse cursor in the center of the new div. Any assistance would be greatly appreciated. Thank you!