Question

I have an image with a click event handler that captures the location where you clicked.

$("#image").click(function(e)
{
    var x = e.pageX - $(this).offset().left;
    var y = e.pageY - $(this).offset().top;
});

I want it so that when the image is clicked an image appears at that location on top of the image. How do I do this?

Answer 1

Use absolute positioning and the top and left CSS attributes to place the image over the co-ordinates you calculate.

If the image you want to position is as below:

<img id="move-me" style="position:absolute;display:none;z-index:99" src="/somewhere.jpg"/>

Have the following procedure in your code:

$('#move-me').css({
   left: x-coord,
   top: y-coord
}).show();

The z-index property ensures the image is shown overlays all other elements on the page…