Как опредилить на JS координаты точки клика на картинке?

Виталик · 10 май 2006, 16:54

Как определить на JScript координаты точки клика (x,y) на картинке 1.jpg относительно верхнего левого угла этой картинки?

Oscar · 10 май 2006, 19:44

Код: Выделить всё

<script>
function test(mouseEvent) {

	if (!mouseEvent) mouseEvent = window.event;

	var sourceElement = (mouseEvent.target)?mouseEvent.target:mouseEvent.srcElement;

	var x = mouseEvent.clientX - sourceElement.offsetLeft;
	var y = mouseEvent.clientY - sourceElement.offsetTop;

	alert(x + " x " + y);

}
function init() {
	document.getElementById("image").onclick = test;
}
</script>
<body onload="init();">
<div id="image" style="width: 200px; height: 200px; border: 1px solid black; background-color: #F0F000;"></div>
</body>

Виталик · 11 май 2006, 12:27

Oscar,

если ставлю размер "width: 600px; height: 600px;" и кликаю в нижнем правом угле, то игриковая координата намного менше реальное, примерно 535 .

Виталик · 11 май 2006, 13:34

Oscar,

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

Oscar · 11 май 2006, 14:49

Виталик,

Код: Выделить всё

function doSomething(e)
{
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY)
	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY)
	{
		posx = e.clientX + document.body.scrollLeft;
		posy = e.clientY + document.body.scrollTop;
	}
	// posx and posy contain the mouse position relative to the document
	// Do something with this information
}

(c) http://www.quirksmode.org/js/events_properties.html (очень хороший сайт, кстати)

Так получаешь позицию относительно документа.

Код: Выделить всё

function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}

(с) http://www.quirksmode.org/js/findpos.html

а это положение элемента на странице.

то есть нужно отнять.

Виталик · 11 май 2006, 16:06

Oscar,

OK, спасибо, вопрос ЗАКРЫТ !!!