Як дізнатися координати курсора.

Щоб запрограмувати якісь дії у відповідь на переміщення курсору у вікні браузера буває необхідно визначити його координати. Це може зробити скрипт, який має можливість відстежувати події, що відбуваються в браузері. Таку можливість має виконуваний на стороні клієнта JavaScript-сценарій. Нижче описаний один з варіантів отримання координат курсора з використанням можливостей цієї мови.
Інструкція
1
Використовуйте властивості об'єкта event для отримання поточних координат курсору. Цей об'єкт має цілий набір властивостей, які мають відношення до визначення координат курсора миші. Властивість LayerX містить виміряне в піскселах відстань від лівого краю поточного шару, а LayerY - аналогічну відстань від його верхнього краю. У цих двох властивостей є синоніми - замість event.LayerX можна писати event.x, а замість event.LayerY - event.y. Властивості pageX і pageY містять горизонтальну і вертикальну координати курсору щодо верхнього лівого краю вікна браузера, а в властивості screenX і screenY поміщаються аналогічні значення щодо екрану монітора.
2
Додавайте в код перевірку типу браузера і використовуйте властивості clientX і clientY на додаток до наведених вище властивостям об'єкта event. Це необхідно через те, що Microsoft в свій браузер Internet Explorer закладає відмінне від стандартних визначень позначення властивостей. Поєднати обидва підходи до визначення координат можна, наприклад, так: if (evevnt.pageX || evevnt.pageY) {coordinateX = evevnt.pageX; coordinateY = evevnt.pageY;} else if (evevnt.clientX || evevnt.clientY) {coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft; coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;}
3
Помістіть код визначення координат в користувача функцію. Наприклад: function GetMouse (evevnt) {var coordinateX = 0, coordinateY = 0; if (! evevnt) evevnt = window.event; if (evevnt.pageX || evevnt.pageY) {coordinateX = evevnt.pageX; coordinateY = evevnt.pageY; } Else if (evevnt.clientX || evevnt.clientY) {coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft; coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop; } Return {"coordX": coordinateX, "coordY": coordinateY};} Ця функція повертає масив з двох іменованих елементів, перший з яких (з ключем coordX) містить координату по осі X, а другий (coordY) - по осі Y.
4
Викликайте цю функцію з якого або події - наприклад, за подією переміщення миші (onmousemove) в контексті документа. Наведений нижче зразок використовує функцію для виведення координат миші в рядок стану: document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status="коорд X:" + CurCoord.coordX + "px, коорд Y:" + CurCoord.coordY + "px";};