ProfiPHPProfiPHP
Категория: jQuery

Получение координат изображения при щелчке или перемещении мыши

При работе с графикой очень часто необходимо узнать координаты точки на изображении. Опишем как это реализовать с помощью jQuery.

Найти точные координаты X и Y в месте положения мыши можно используя события jQuery pageX и pageY. Поиск точных координат местоположение мыши можно осуществить наведя ее на изображение или щелкнув по нему.

Обязательно перед использованием необходимо подключить библиотеку jQuery.
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
Добавим изображение и элемент DIV, который покажет нам координаты при перемещении, наведении или щелчке по изображению.
<img src="image.jpg" />
<div id="coordinates"></div>
Чтобы получить точные координаты X и Y изображения, мы будем использовать метод jQuery offset, c помощью которого можно узнавать координаты элемента на странице при щелчке мыши:
<script>
$(document).ready(function() {
$('img').click(function(e) {
var offset = $(this).offset();
var X = (e.pageX - offset.left);
var Y = (e.pageY - offset.top);
$('#coordinates').text( 'X: ' + X + ', Y: ' + Y );
});
});
</script>
Поиск точных координат X и Y изображения при перемещении мыши осуществляется так:
<script>
$(document).ready(function() {
$('img').on("mousemove", function(e) {
var offset = $(this).offset();
var X = (e.pageX - offset.left);
var Y = (e.pageY - offset.top);
$('#coordinates').text( 'X: ' + X + ', Y: ' + Y );
});
});
</script>
Вы можете попробовать другие элементы HTML, такие как DIV или P.

Добавить комментарий

Имя:
Текст комментария: