Визначення координат на зображенні за допомогою javascript, 2coders - блог web-розробника

При розробці одного проекту мені потрібно було визначити координати кліка користувача по зображенню. Тобто визначити місце натискання. Це виявилося зовсім не складним завданням.

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

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

Ну і додамо обробник на подій onclick картинки.

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

Це працює тільки на голій сторінці.
Як тільки з'являється табличное форматування - спливає позиція Х.
Позиція Y зрушена на 40-50 одиниць від реальної, причому в різних браузерах по різному ...
Доопрацювати не вийде?

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

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

// Отримуємо координати кліка по сторінці, тобто абсолютні координати кліка.

if (document.attachEvent! = null) 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) x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
>

// Визначаємо межі об'єкта, в нашому випадку картинки.

// Перераховуємо координати і виводимо їх Алерт.

У що всю ету штуку брати щоб працювало! в боді, скрипт, або в хтмл.

Щиро Дякую!
Тільки чомусь в IE код видає помилку NaN.
Може бути, Ви зможете допомогти розібратися, в чому може бути справа?

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