Определение координат на изображении с помощью JavaScript | 2Coders. Блог 2-х web-разработчиков
Автор d4rkr00t Дата: 5 Август 2009

Определение координат на изображении с помощью 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);">

Вот и все.



No comments yet!

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

Это не спам.