Определение координат на изображении с помощью JavaScript

При разработке одного проекта мне нужно было определить координаты клика пользователя по изображению. То есть определить место нажатия. Это оказалось совсем не сложной задачей.

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body style="padding-top: 50px;">
<img id='kartina' src="reactive.jpg">
</body>
</html>

Все предельно просто, отступ сверху сделан для того, что бы показать, что считаются координаты только картинки, а не всего документа.

Теперь добавим нашу javascript функцию:

function defPosition(event) {
    var x = y = 0;
	var event = event || window.event;
	
	// Получаем координаты клика по странице, то есть абсолютные координаты клика.

    if (document.attachEvent != null) { // Internet Explorer & Opera
        x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
        y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    } else if (!document.attachEvent && document.addEventListener) { // Gecko
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
    } 
	
	//Определяем границы объекта, в нашем случае картинки.

	y0=document.getElementById("kartina").offsetTop;
	x0=document.getElementById("kartina").offsetLeft;
    	
	// Пересчитываем координаты и выводим их алертом.

	x = x-x0;
	y = y-y0;
	
	alert(x+'|'+y);
}

Я думаю по комментариям понятно, как работает.

Ну и добавим обработчик на событий onclick картинки.

<img id='kartina' src="reactive.jpg">

Заменим на:

<img id='kartina' src="reactive.jpg" onclick="defPosition(event);">

Вот и все.

Теги: ,

Комментарии

  1. Pavel
    12 марта 2010 в 14:40

    Я тебя обожаю!!))), ты не представляешь сколько я передолбался пока сам пытался такое сообразить!

    Reply

  3. Николай
    26 ноября 2011 в 23:09

    Это работает только на голой странице.
    Как только появляется табличное форматирование — уплывает позиция Х.
    Позиция Y сдвинута на 40-50 единиц от реальной, причём в разных браузерах по разному…
    Доработать не получится?

    Reply

    Max Reply:
    Ноябрь 28, 2011 at 18:20


    Все в ваших руках

    Reply

  4. Nikolay
    29 марта 2013 в 1:56

    function defPosition(event) {
    var x = y = 0;
    var event = event || window.event;

    // Получаем координаты клика по странице, то есть абсолютные координаты клика.

    if (document.attachEvent != null) { // Internet Explorer & Opera
    x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    } else if (!document.attachEvent && document.addEventListener) { // Gecko
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
    }

    //Определяем границы объекта, в нашем случае картинки.

    y0=document.getElementById(«kartina»).offsetTop;
    x0=document.getElementById(«kartina»).offsetLeft;

    // Пересчитываем координаты и выводим их алертом.

    x = x-x0;
    y = y-y0;

    alert(x+’|’+y);
    }

    В что всю ету штуку брать чтобы работало! в боди,скрипт ,или в хтмл ????????

    Reply

    Max Reply:
    Март 29, 2013 at 20:52


    Между тегом < .script>.

    Reply

  5. Андрей
    17 октября 2015 в 22:47

    Большое спасибо!
    Только почему-то в IE код выдает ошибку NaN.
    Может быть, Вы сможете помочь разобраться, в чем может быть дело?

    Reply

  6. Андрей
    18 октября 2015 в 8:46

    Большое спасибо за решение!
    Только у меня почему-то в IE алерт вместо чисел выводит NaN. Единственно, что пришло в голову — в IE 10, по сравнению с предыдущими версиями, что-то поменялось в части обработки событий, и теперь все нужно определять как-то по-другому… Может быть, Вы могли бы помочь разобраться?

    Reply

Оставить комментарий