开发者

Display image at point using jQuery

开发者 https://www.devze.com 2022-12-24 18:27 出处:网络
I have an image with a click event handler that captures the location where you clicked. $(开发者_开发百科\"#image\").click(function(e)

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?


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...

0

精彩评论

暂无评论...
验证码 换一张
取 消