788
2351
Получить координаты курсора на экране
Предлагаем Вам простой JavaScript код, отображающий текущие координаты курсора на экране. Координаты берутся относительно окна странички и не превышают разрешение экрана.
Данный скрипт позволяет выводить координаты курсора как в statusbar-е, так и в заданном месте странички.
Текущие координаты курсора:
Для получения текущих координат курсора на экране сайта вставьте на свою страничку следующий скрипт:
JavaScript код:
<script type="text/javascript">
function init() {
if (document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mousemove;
}
function mousemove(event) {
var mouse_x = mouse_y = 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 г.
Посещений: 166813 раз(а).
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Координаты отображаются, но можно ли сделать так, чтобы при открытии изображения (й), например, какого-либо технического чертежа координаты перемещались только на этом изображении, что было бы как в программах САПР, где при перемещении курсора меняются координаты при перемещении курсора.
В примере координаты меняются на всем экране, а реализовать только в пределах изображения, например, 800x600px можно?
Дизайн сайта, по крайней мере, моего от этого явно бы улучшился.
<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>
У меня на блоге имеется изображение (150x110px) и если пользователь кликнет по изображению, то загрузится второе изображение (800x600px) при помощи скрипта Pirobox, где имеется чертеж САПР.
Было бы неплохо, если после увеличения изображения до 800x600px при передвижении курсора и менялись координаты.
В вашем примере при наведении курсора на изображение 150x110px меняются координаты и сами координаты вне изображения, а хотелось, чтобы они перемещались вместе с курсором внутри изображения (800x600px). Реально так сделать? Заранее благодарен.
<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">↓ Увеличить изображение</a></h3>
<a href="img/gallery/qcad.png" class="pirobox" title="Увеличить изображение"><img src="img/gallery/qcad-image.png" alt="QCAD" /></a>
</div>
В первой строке я к тексту добавляю иконку, далее если кликнуть на ссылку ↓ Увеличить изображение, то qcad-image.png (110x150px) заменяется плавно изображением (800x600px) при помощи скрипта Pirobox в следующей строке и также происходит, если кликнуть на само изображение qcad-image (110x150px).
Т.е. имеются два одинаковых изображения с разными размерами и вот когда пользователь кликнет по первому изображению, весь экран затемнится и плавно появится второе изображение (800x600px), где и хотелось бы наблюдать при перемещении курсора координаты, но только на этом изображении. После просмотра изображения их не должно быть видно.
Надеюсь, более-менее ясно изъяснился. Заранее благодарен.
Я думаю, будет сложно реализовать данную проблему, так как скрипт Pirobox имеет только таблицу CSS и необходимые картинки, на HTML странице только прописывается class="pirobox".
В CSS код не добавить из сообщения # 2108 и чтобы реализовать данную возможность, я думаю, придется создавать новый скрипт.
Если добавляю код сообщения # 2108 на страницу для конкретного изображения, то при наведении курсора на это изображение (в моем случае 110x150px) меняются координаты только внутри этого изображения и то сами координаты вне изображения показываются.
A я хотел бы реализовать скрипт, который будет работать, когда плавно появится второе изображение (800x600px) и координаты будут меняться и показываться, только в пределах этого изображения, как повторяюсь в программах САПР.
Javascript немного знаю, но думаю тут одним js не обойтись, может быть придется что-то добавлять. На данный момент я нигде не видел ничего подобного. С уважением, Алексей.
Скрипт Pirobox имеет также и pirobox.js, но вставка кода из сообщения #2108 не решает проблему, описанную в сообщении #2132.
<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>
Все работает. Только толщина рамки изображения тоже считается.
P.S. У Вас скролл не предусмотрен, то есть статистика ведется только по отображению, а не по высоте и ширине. Если юзер не тронет мышь, а прокрутит страницу, то результат будет один тот же на разных позициях курсора мыши на сайте.
Х считает правильно: слева направо. А вот Y считает сверху вниз, хотя должен считать снизу вверх.
Как это исправить?
Если Вам необходимо сделать наоборот, то Вам необходимо получить высоту окна браузера и вычитать из нее указанные значения.
Нужно, чтобы при наведении курсора вылазило PopUp окно с формой, но только, когда курсор поднялся на самый верх.
Есть вот этот код, который работает корректно, но мышка выходит за пределы вообще DOM и всплывает PopUp окно, а этого не нужно. Вот короткий код:
$('html').mouseleave(function(){ $('#modal').modal(); });
$("#blokTop .slovoHover").mouseover(function(e) {
$(this).next().show(100).css("display", "block").css("top", e.pageY).css("left", e.pageX);
}).mouseout(function() {
$("#blokTop .vsplPodskazka").hide(100);
});
Но в этой функции, похоже, позиция курсора берется с начала страницы, а не окна. А у меня блок ".vsplPodskazka" имеет position:fixed, и, следовательно, ему нужно передать размеры относительно окна браузера (я хочу выводить подсказку в месте мышки, при подводе на интересующее слово).
Пробовал внутри $("#blokTop .slovoHover").mouseover(function() {} сделать ещё одну функцию $(window).mouseover(function(e) {} и в нем уже указать действия - вообще все скрипты перестают выполняться.
Не подскажете, может, можно вычислить позицию курсора и без функции function(e) {}?
в конце функции mousemove(event) дописал строку
return [mouse_x,mouse_y]; //пытаюсь вернуть массив
далее в скрипте пишу
const XY = mousemove(event); //создаю массив и передаю в него координаты
document.getElementById("main").innerHTML ="x = " + XY[0] + ", y = " + XY[1]; //пытаюсь в блок main вывести координаты
В блок main не выводится ничего.