[JavaScript] Координаты мыши при клике на картинку

Petrovich_on_T3

Только без перезаргузки страницы. Просто - кликнул на картинку - в поля вписались координаты.

Как такое реализовать?

maggi14

event.x
event.y
?

Petrovich_on_T3

Поподробней, если можно, пример кода.

maggi14

<html>
<body>
<input type="text" id=TEXT>
<img src="untitled.gif" onClick="TEXT.value = event.x + ' ' + event.y; return false;">
</body>
</html>

feliks28

[вопрос дилетанта] А "return false;" там зачем? [/вопрос дилетанта]

maggi14

потому что сначала там была не картинка, а ссылка

Petrovich_on_T3

Спасибо, работает.
Но возвращаются координаты в системе отсчёта, связанной со всей страницей. А как получить координаты в системе отсчёта, имеющей начало отсчёта в левом верхнем углу картинки?
Может, можно получить координаты верхнего левого угла картинки или что-то в этом роде?

a10063

Может, можно получить координаты верхнего левого угла картинки или что-то в этом роде?
вроде можно у любого элемента, но это browser-dependent
в инете разве ничего нет? http://www.w3schools.com/default.asp глянь для примеров всяких

maggi14

style.posLeft ? не уверен, правда, что это кроссброузерно

Petrovich_on_T3

Это свойство картинки?
Пишу
<HTML><HEAD></HEAD><BODY>

<input type="text" id=TEXT1>

<img src="untitled.png" id=PICTURE1 onClick="TEXT1.value = PICTURE1.style.posLeft;">

</BODY></HTML>

- в IE и Опере всегда печатается 0.

maggi14

это ее левая координата. Пиши не PICTURE1.style.posLeft, а event.x - PICTURE1.style.posLeft.
Я сам не пробовал, если что.

Petrovich_on_T3

Получается то же, что и раньше. - Видимо, вычитается нуль.

maggi14

{position:absolute;top:10px;left:20px;}
работает только в CSS-P

Petrovich_on_T3

<html> 

<head> 

<script language="javascript"> 

function getDetails(obj){ 

  clickX = window.event.x-obj.offsetLeft - 2;

  clickY = window.event.y-obj.offsetTop - 2;

  coordX.value = clickX;

  coordY.value = clickY;

} 

</script> 

</head> 

<body>

<input type='text' id=coordX>

<input type='text' id=coordY>

<img src="untitled.png" onclick="getDetails(this)">

</body> 

</html>

Нашёл тут: http://www.webmasterworld.com/forum91/4187.htm посредством Гугла Спасибо всем откликнувшимся, особенно Кайяфе.
Правда, в IE ещё приходится вычитать 2 из clickX и clickY, чтобы получить координаты в пределах картинки от 0 до (РАЗМЕР_КАРТИНКИ - 1). А в опере вычитать не нужно. Может быть, кто-нибудь знает, почему?

dedwowan

бордер поставь 0, наверно поможет

Petrovich_on_T3

не помогает

Petrovich_on_T3

Кстати, если изображение вложено в таблицу, то указанные формулы не работают. Видимо, свойство offsetLeft содержит отступ от элемента-родителя.

В связи с этим вопрос - как получить отступ картинки от угла страницы?

- Как вариант - просуммировать отступы от элемента до его родителя по всем предкам картинки. Но для этого нужно уметь обратиться к родителю элемента - как это можно сделать?

artimon

Собрание неучей, ёклмн...
http://kruglov.ru/articles/crossbrowserdhtml/#mous...
http://xpoint.ru/know-how/JavaScript/PoleznyieFunk...
Оставить комментарий
Имя или ник:
Комментарий: