Координаты курсора на экране

[ale10ey]

Уважаемый администратор, из темы 135 "Получить координаты курсора на экране"
есть вопросы, которые я задавал в теме #2132, но нет желаемого результата.
Из вашего сообщения #2140 все понятно, но у меня не работает должным образом.
Добавляю в сообщение архив (css, js, pirobox, img + страница), где при клике на ссылку "Увеличить изображение" или на 1 изображение (110x150px)



Срабатывает скрипт Pirobox, весь экран затемняется и плавно появляется 2 изображение с размерами 800x600px



При перемещения курсора мыши в пределах изображения (800x600px) координаты должны меняться и показываться, но только в пределах этого изображения, как в программах САПР, а при выходе из режима просмотра пропадать.
Для наглядности сделал страницу со всеми необходимыми скриптами, как пример.
Исходник:

  coords.rar (Размер: 105.43 Кб / Загрузок: 6)
Заранее благодарен.

[Admin]

Итак, скачал, протестировал непосредственно на предоставленном коде.

В результате Вам необходимо сделать всего пару небольших изменений. А именно, в файл program.html добавьте следующее:

Код:

<style type="text/css">
.xy_pos { position: fixed; left: 5px; top: 5px; }
</style>

<span class="xy_pos"></span>

А в файл piroBox_1.2.min.js вместо:

Код:

$(document).ready(function(){
$(".pirobox").mousemove(function(e) {
var relativeX = e.pageX - $(this).offset().left;
var relativeY = e.pageY - $(this).offset().top;
$(".xy_pos").html("X = " + relativeX + " Y = " + relativeY);
});
});

вставьте:

Код:

$(document).ready(function(){
$(".unique").find("img").live('mousemove', function(e) {
var relativeX = e.pageX - $(this).offset().left;
var relativeY = e.pageY - $(this).offset().top;
$(".xy_pos").html("X = " + relativeX + " Y = " + relativeY);
});
$(".piro_close").live('click', function(e) { $(".xy_pos").html(""); });
});

[ale10ey]

Спасибо за ответ.
Проверил у себя и есть некоторые вопросы.
1. Координаты по X показываются нормально, а по Y - длинная запись, в идеале, например x=157 y=10, но можно и с десятыми, а далее смотрится тяжеловато.


2. Согласно коду
<style type="text/css">
.xy_pos { position: fixed; left: 5px; top: 5px; }
</style>
<span class="xy_pos"></span>

Координаты отображаются в левом верхнем углу с отступами слева и сверху 5px,
что правильно, но я хотел, чтобы координаты отображались на самом уже увеличенном изображении (800x600px), а не вне изображения, как это происходит сейчас иначе теряется вся задумка выполнения скрипта.
Кликнули по 1 изображению, 2 изображение увеличилось и пользователь может посмотреть на чертеж и в момент просмотра он явно будет пользоваться мышкой и координаты будут изменяться, как я повторяюсь, если бы пользователь работал в программе, например, AutoCAD.
На скрине видно внизу слева координаты перемещаются в момент, когда пользователь передвигается по экрану с помощью мышки.


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

Надеюсь, более-менее изъяснился.
Заранее благодарен за труды.

---

Поправка к сообщению #3 насчет строчки:
"координаты все еще на экране и уже не изменяются"
Если закрыть изображение при помощи нажатия кнопки "Закрыть" в верхнем правом углу, то координаты, действительно, исчезают. Все работает.
Но в данном скрипте реализовано так, что можно закрыть изображение и при помощи нажатия кнопки Escape, что в данном скрипте не реализовано, а в pirobox скрипте эта возможность есть.
Просто я сам обычно, пользуюсь горячими клавишами, поэтому и сразу не стал проверять при помощи кнопки "Закрыть".

[Admin]

Сделал еще один корявенький вариант (в IE съезжает)...

В program.html:

Код:

<style type="text/css">
    .xy_pos { position:absolute; z-index:99999; }
</style>

<span class="xy_pos"></span>

В piroBox_1.2.min.js:

Код:

$(document).ready(function(){
$(".unique").find("img").live('mousemove', function(e) {
    var relativeX = e.pageX - Math.floor($(this).offset().left);
    var relativeY = e.pageY - Math.floor($(this).offset().top);
    $(".xy_pos").html("X = " + relativeX + " Y = " + relativeY);

    $(".xy_pos").css({"left":"0","margin-left":$(".pirobox_content").offset().left+15,
    "top":"0","margin-top":$(".pirobox_content").offset().top+$(".pirobox_content").outerHeight()-35});
});


$("a.pirobox").bind("click",function(d) { $(".xy_pos").css("display","block"); });

$(".piro_close").live("click", function(e) { $(".xy_pos").css("display","none"); });
$().bind("keydown", function (c) {    if (c.keyCode === 27) { $(".xy_pos").css("display","none"); }});
});

[ale10ey]

Доброе время суток!
Все работает, спасибо !

[ale10ey]

Доброе время суток, как я писал ранее работает все нормально, но есть 1 вопрос.
У меня на странице несколько изображений и координаты отображаются правильно, но у всех изображений немного разные меню, отступы слева или справа и расположить координаты, например в левом нижнем углу можно без проблем и если для 1, 3, 6 изображения будет нормально так как у них меню более-менее совпадают, а для других нет.

Нет ли возможности координаты зафиксировать для конкретного изображения, например в левом нижнем углу.
Понятно, что нужно будет для этого задавать какой-либо class или id или другое.
Пробовал для конкретного изображения, которое у меня находится в блоке <div>
указывать <span class="xy_pos" title="Текущие координаты"></span>, но не работает.

На изображения ниже видно, что на 2 изображении перекрывается чертеж, так как
правила top и right для них одинаковы, а хотелось чтобы чертеж не перекрывался иначе выглядит тяжеловато.

Изображение 1:


Изображение 2:


Для 2 изображения нужно прописать такие же правила, как и для 1, только с другими значениями, чтобы чертеж был отдельно, а координаты отдельно.
Заранее благодарен.

[Admin]

Тут нужно разобраться, как в конкретном коде на JS можно отличить одно меню от другого для того чтобы делать разные позиции для координат курсора.

Например, для одного типа меню, изображению (или блоку в котором оно находится) должен быть задан какой-то класс, который будет отличаться от других. Тогда можно будет его сканировать и в зависимости от его значения делать изменения для отображения координат.

На выходных надо будет подумать.

[ale10ey]

(12.02.2015 21:58:49)Admin писал(а):  Тут нужно разобраться, как в конкретном коде на JS можно отличить одно меню от другого для того чтобы делать разные позиции для координат курсора.

Например, для одного типа меню, изображению (или блоку в котором оно находится) должен быть задан какой-то класс, который будет отличаться от других. Тогда можно будет его сканировать и в зависимости от его значения делать изменения для отображения координат.

На выходных надо будет подумать.

Пробовал прописывать class или id, но не совсем корректно работает.
Получается, что для каждого изображения, где я хочу поменять координаты нужно редактировать javascript или можно сделать как то оптимальней, а то, например, для 20 изображений нужно будет прописать в js свои css правила для координат и таких js скриптов будет 20 соответственно.

Нет ли возможности в самом блоке, например, div прописать встроенный <style></style>, где и указать необходимые отступы для координат для конкретного изображения.
Заранее благодарен.

[Admin]

Я немного другое имел ввиду.

В файле program.html для изображения задаем новый класс, например, xy_1. Для изображений с другими меню этот класс будет xy_2 и т.д.

Код:

<img class="xy_1" src="img/review-image.png" alt="Autodesk Design Review" />

В piroBox_1.2.min.js предыдущий наш код меняем на такой:

Код:

var xy_class='';
var xy_pos_x=0;
var xy_pos_y=0;
$(document).ready(function(){

$(".entry").live("click", function(e) { xy_class=$(this).find("img").attr("class"); });

$(".unique").find("img").live('mousemove', function(e) {

    if (xy_class=='xy_1') { xy_pos_x=15; xy_pos_y=35; }
    else if (xy_class=='xy_2') { xy_pos_x=25; xy_pos_y=45; }

    var relativeX = e.pageX - Math.floor($(this).offset().left);
    var relativeY = e.pageY - Math.floor($(this).offset().top);
    $(".xy_pos").html("X = " + relativeX + " Y = " + relativeY);

    $(".xy_pos").css({"left":"0","margin-left":$(".pirobox_content").offset().left+xy_pos_x,
    "top":"0","margin-top":$(".pirobox_content").offset().top+$(".pirobox_content").outerHeight()-xy_pos_y});
});

$("a.pirobox").bind("click",function(d) { $(".xy_pos").css("display","block"); });

$(".piro_close").live("click", function(e) { $(".xy_pos").css("display","none"); });
$().bind("keydown", function (c) {    if (c.keyCode === 27) { $(".xy_pos").css("display","none"); }});
});

Как видно, в строчках:

Код:

if (xy_class=='xy_1') { xy_pos_x=15; xy_pos_y=35; }
else if (xy_class=='xy_2') { xy_pos_x=25; xy_pos_y=45; }

для заданных классов указываем различные отступы.

[ale10ey]

Доброе время суток,
Подключил данный скрипт и прописал class="xy_1" для 1 и class="xy_2" для 2 изображения, чтобы проверить в работе
Координаты не отображаются вообще, для проверки заменил == на знак = в
xy_class=='xy_1' и xy_class=='xy_2 в следующем выражении:

if (xy_class=='xy_1') { xy_pos_x=50; xy_pos_y=70; }
else if (xy_class=='xy_2') { xy_pos_x=60; xy_pos_y=60; }
и координаты появились на экране, но как и ранее они одинаковы для всех изображений на странице.
Пробовал прописывать вместо class атрибут id, но безрезультатно.

Если == заменить на = и попробовать в 1 выражении:
if (xy_class=='xy_1') { xy_pos_x=50; xy_pos_y=70; }
поменять значения, то координаты будут меняться и для 2 изображения несмотря на то что, у него прописан class="xy_2", а если менять значения во 2 выражении:
else if (xy_class=='xy_2') { xy_pos_x=60; xy_pos_y=60; },
изменений нет, координаты работают, как и для 1 изображения.

Все вроде логично, прописаны разные классы для 1 и 2 изображения, проверил
каждую строчку скрипта, но не нашел ошибок, а также не получилось их поменять для 2 изображения.
Продолжаю сейчас работать, так как уже скрипт имеется на странице, остается его немного поправить, чтобы работал правильно, но пока не выходит.
С уважением, Алексей.