Страница 1 из 1
Как опредилить на JS координаты точки клика на картинке?
Добавлено: 10 май 2006, 16:54
Виталик
Как определить на JScript координаты точки клика (x,y) на картинке 1.jpg относительно верхнего левого угла этой картинки?
Добавлено: 10 май 2006, 19:44
Oscar
Код: Выделить всё
<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,
и ещё один момент: если окно прокручивается скролингом то координаты показывает от верхнего левого угла окна браузера, а надо от верхнего левого угла картинки.
Добавлено: 11 май 2006, 14:49
Oscar
Виталик,
Код: Выделить всё
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, спасибо, вопрос ЗАКРЫТ !!!