Отображение изображения в точке с помощью jQuery

Question

У меня есть изображение с обработчиком событий щелчка, которое фиксирует местоположение, в котором вы щелкнули.

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

Я хочу, чтобы при щелчке по изображению в этом месте поверх изображения появлялось изображение. Как мне это сделать?

Answer 1

Используйте абсолютное позиционирование и CSS-атрибуты top и left, чтобы поместить изображение поверх вычисляемых вами координат.

Если изображение, которое вы хотите расположить, выглядит так:

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

В вашем коде есть следующая процедура:

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

Свойство z-index гарантирует, что показанное изображение перекрывает все остальные элементы на странице ...