Новости Скрипты Онлайн сервисы Хитрости Гостевая книга Статистика сайта Реклама на сайте
UsefulScript.ruСкриптыРазныеКоординаты курсора
265
872

Получить координаты курсора на экране

Предлагаем Вам простой JavaScript код, отображающий текущие координаты курсора на экране. Координаты берутся относительно окна странички и не превышают разрешение экрана.


Данный скрипт позволяет выводить координаты курсора как в statusbar-е, так и в заданном месте странички.


Текущие координаты курсора:


Для получения текущих координат курсора на экране сайта вставьте на свою страничку следующий скрипт:

JavaScript код:
<script type="text/javascript">
ns4 = (document.layers)? true:false
ie4 
= (document.all)? true:false

function init() {
    if (
ns4) {document.captureEvents(Event.MOUSEMOVE);}
    
document.onmousemove=mousemove;
}
function 
mousemove(event) {
    var 
mouse_x 0;
    if (
document.attachEvent != null) {
        
mouse_x window.event.clientX;
        
mouse_y window.event.clientY;
    } else if (!
document.attachEvent && document.addEventListener) {
        
mouse_x event.clientX;
        
mouse_y event.clientY;
    }
    
status="x = " mouse_x ", y = " mouse_y;
    
document.getElementById('xy').innerHTML "x = " mouse_x ", y = " mouse_y;
}
init()
</script>

Далее, в том месте странички, где необходимо получить координаты курсора (если необходимо), вставляем элемент <span id="xy"></span>.


Если Вы все правильно сделали, то при перемещении курсора мыши по экрану браузера внутри элемента <span id="xy"></span> и в statusbar-е должны отображаться текущие координаты курсора.


Дата создания: 15:35:47 24.07.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений темы: 39234 раз(а).

Комментарии посетителей (всего 16 шт.):
Иван
16
# 49
(00:10:33  07.01.2012 г.)

Все работает. Вот только комментариев к коду не хватает.
Ответить

Алексей
1
# 2105
(16:46:01  09.12.2014 г.)

Доброе время суток,
Координаты отображаются, но можно ли сделать так, чтобы при открытии изображения (й), например, какого-либо технического чертежа координаты перемещались только на этом изображении, что было бы как в программах САПР, где при перемещении курсора меняются координаты при перемещении курсора.
В примере координаты меняются на всем экране, а реализовать только в пределах изображения, например 800x600px можно?
Дизайн сайта, по крайней мере, моего от этого явно бы улучшился.
Ответить

Administrator
0
# 2108
(21:07:59  09.12.2014 г.)

Конечно можно, но для этого придется воспользоваться библиотекой JQuery:
<img class="image" src="image/img_1.png" alt="">
<span class="xy_pos"></span>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".image").mousemove(function(e) {
var relativeX = e.pageX - $(this).offset().left;
var relativeY = e.pageY - $(this).offset().top;
$(".xy_pos").html("X = " + relativeX + " Y = " + relativeY);
});
});
</script>
Ответить

Алексей
0
# 2110
(13:34:20  10.12.2014 г.)

Не совсем правильно объяснил.
У меня на блоге имеется изображение (150x110px) и если пользователь кликнет по изображению, то загрузится 2 изображение (800x600px) при помощи скрипта Pirobox, где имеется чертеж САПР.
Было бы неплохо, если после увеличения изображения до 800x600px при передвижении курсора и менялись координаты.
В вашем примере при наведении курсора на изображение 150x110px меняются координаты и сами координаты вне изображения, а хотелось, чтобы они перемещались вместе с курсором внутри изображения (800x600px). Реально так сделать? Заранее благодарен.
Ответить

Administrator
0
# 2115
(20:12:34  10.12.2014 г.)

Так вставьте выше приведенный скрипт на страничку, содержащую увеличенное изображение и укажите класс данного изображения. А лучше дайте ссылку на страничку (опубликована не будет) чтобы точнее ответить.
Ответить

Алексей
0
# 2117
(14:05:12  11.12.2014 г.)

Ссылки нет пока, так как сайт в процессе доработки, но вот html код:
<div class="entry">
<h2><img class="icon" src="img/icons/qcad.png" />QCAD</h2>
<h3><a href="img/gallery/qcad.png" class="pirobox" title="QCAD">&darr; Увеличить изображение</a></h3>
<a href="img/gallery/qcad.png" class="pirobox" title="Увеличить изображение"><img src="img/gallery/qcad-image.png" alt="QCAD" /></a>
</div>

В 1 строке я к тексту добавляю иконку, далее если кликнуть на ссылку &darr; Увеличить изображение, то qcad-image.png (110x150px) заменяется плавно изображением (800x600px) при помощи скрипта Pirobox в следующей строке и также происходит, если кликнуть на само изображение qcad-image (110x150px).
Т.е. имеются 2 одинаковых изображения с разными размерами и вот когда пользователь кликнет по 1 изображению, весь экран затемнится и плавно появится 2 изображение (800x600px), где и хотелось бы наблюдать при перемещении курсора координаты, но только на этом изображении. После просмотра изображения их не должно быть видно.
Надеюсь более-менее ясно изъяснился. Заранее благодарен.
Ответить

Administrator
1
# 2123
(21:28:02  11.12.2014 г.)

Тут надо смотреть код скрипта Pirobox. По идее, в него можно добавить код из сообщения # 2108 (только класс заменить на icon вместо image) и все будет работать, но нужно пробовать.
Ответить

Алексей
0
# 2132
(14:44:33  14.12.2014 г.)

Доброе время суток.
Я думаю, будет сложно реализовать данную проблему, так как скрипт Pirobox имеет только таблицу css и необходимые картинки, на html странице только прописывается class="pirobox".
В css код не добавить из сообщения # 2108 и чтобы реализовать данную возможность, я думаю, создавать новый скрипт.
Если добавляю код сообщения # 2108 на страницу для конкретного изображения, то при наведении курсора на это изображение (в моем случае 110x150px) меняются координаты только внутри этого изображения и то сами координаты вне изображения показываются.
A я хотел бы реализовать скрипт, который будет работать, когда плавно появится 2 изображение (800x600px) и координаты будут меняться и показываться, только в пределах этого изображения, как повторяюсь в программах САПР.
Javascript немного знаю, но думаю тут одним js не обойтись, может быть придется что-то добавлять. Н данный момент я нигде не видел ничего подобного. С уважением, Алексей.
Ответить

Алексей
-1
# 2137
(18:22:53  16.12.2014 г.)

Поправка к сообщению #2132
Скрипт Pirobox имеет также и pirobox.js, но вставка кода из сообщения #2108 не решает проблему описанную в сообщении #2132.
Ответить

Administrator
1
# 2140
(22:04:46  16.12.2014 г.)

Не поленился, скачал Скрипт Pirobox, подглядел название стиля изображения и вставил на страничку код:
<span class="xy_pos"></span>
<script type="text/javascript">
$(document).ready(function(){
$(".img_box").mousemove(function(e) {
var relativeX = e.pageX - $(this).offset().left;
var relativeY = e.pageY - $(this).offset().top;
$(".xy_pos").html("X = " + relativeX + " Y = " + relativeY);
});
});
</script>
Все работает. Только толщина рамки изображения тоже считается.
Ответить

Владимир
0
# 2732
(10:36:51  01.10.2015 г.)

А можно ли реализовать функцию, чтобы, когда юзер с другого компьютера заходил на сайт, я на своем видел перемещение его мышки? Или же чтобы сохранялось в LOG и было в папке, например, с интервалом 1 секунда, или чтобы била статистика положения мышки на странице. Ну, чтобы было видно, что смотрит клиент и что ему интересно.
P.S. У Вас скрол не предусмотрен, то есть статистика ведется только по отображению, а не по высоте и ширине. Если юзер не тронет мышь, а прокрутит страницу, то результат будет один тот же на разных позициях курсора мыши на сайте.
Ответить

Administrator
0
# 2734
(12:14:04  01.10.2015 г.)

Установите лучше Яндекс Метрику, она фиксирует перемещения курсора мышки пользователей по экрану и еще много чего интересного.
Ответить

Feex
0
# 3052
(23:29:28  24.02.2016 г.)

Координаты немного неправильно считаются.
Х считает правильно: слева направо. А вот Y считает сверху вниз, хотя должен считать снизу вверх.
Как это исправить?
Ответить

Administrator
0
# 3054
(21:34:41  25.02.2016 г.)

Координаты считаются правильно и должны считаться именно сверху вниз.
Если Вам необходимо сделать наоборот, то Вам необходимо получить высоту окна браузера и вычитать из нее указанные значения.
Ответить

Malariuz
0
# 3298
(14:48:48  30.06.2016 г.)

Добрый день! А вот как прописать такую штуку.
Нужно, чтобы при наведении курсора вылазило PopUp окно с формой, но только, когда курсор поднялся на самый верх.
Есть вот этот код, который работает корректно, но мышка выходит за пределы вообще DOM и всплывает PopUp окно, а этого не нужно. Вот короткий код:
$('html').mouseleave(function(){ $('#modal').modal(); });
Ответить

Гость
0
# 3363
(14:20:27  12.08.2016 г.)

Спасибо огромное! Начал изучать Javascript. Столько бреда в инете, какие только неработающие и огромные скрипты выкладывают по этой теме, а твой код и маленький и не требует вставки в body onmouseover. Огромнейшее тебе спасибо!
Ответить

Закрыть
Ваше имя:
868 + 14 =
Добавить комментарий к теме:
Ваше имя:
868 + 14 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Как Вы узнали о нашем сайте?


Mail.ru LiveInternet