Координаты курсора над слоем, расставляем точки

Простой пример определения координат курсора во время его перемещения над слоем.

Он был сделан для админки одного сайта, чтобы администратор имел возможность добавлять на схему новые объекты. При этом не требуется каждый раз перерисовывать схему, координаты точек сохраняются в БД вместе с описаниями. На выходе, т.е. на самом сайте, точки абсолютно позиционируются по ранее сохраненным координатам (style="position:absolute; left:...; top:...;").

Выглядит пример так:

Проведите курсор над схемой и кликните в любой ее точке левой кнопкой мыши.

HTML-код примера:


<form method="get" id="mapForm" action="">
  <label for="coordXfix">X-координата: </label>
  <input type="text" name="coordXfix" id="coordXfix" value="" />
  <label for="coordX">X: </label>
  <input type="text" name="coordX" /><br />
  <label for="coordYfix">Y-координата: </label>
  <input type="text" name="coordYfix" id="coordYfix" value="" />
  <label for="coordY">Y: </label>
  <input type="text" name="coordY" /><br />
  <br />
  <br />
  <div id="schemePlace"
    style="width:400px;height:400px;
    background: url(scheme.png) no-repeat 0 0;position:relative;">
      <img src="magDot2.png" width="10" height="10" alt=""
        style="display:none; position:absolute;border:0;" id="magDot2" />
      <img src="magDot0.png" width="10" height="10" alt=""
        style="display:none; position:absolute;border:0;" id="magDot" />
  </div>
</form>

Изображение карты сделано фоном для div id="schemePlace". Внутри этого слоя размещены 2 картинки точек: которая перемещается с курсором и которая остается на месте клика. Пару текстовых полей с изменяющимися координатами использую для наглядности. Если хотите от них избавиться, не забудьте убрать их и из JavaScript, т.к. их наличие не проверяется, чтобы не загромождать скрипт. Другую пару полей использую для фиксации координат, а также их значения при отправке на сервер записываются в БД.

JavaScript примера:


function getCoords() {
// вызывается при перемещении курсора
// над слоем с картой
  // координаты слоя с картой
  // в окне браузера
  imageMapX = findPosX(imageMap);
  imageMapY = findPosY(imageMap);
  imageMap.onmousemove = moveDot;
  imageMap.onmouseover = moveDot;
  // точку надо убирать, если курсор
  // покинул слой с картой
  imageMap.onmouseout = function (){
    myDot.style.display="none";
    };
  // координаты точки надо запомнить
  imageMap.onclick = coordsFix;
}

function coordsFix() {
// функция фиксирует координаты точки при клике
  // координата X
  myForm.coordXfix.value = myForm.coordX.value;
  // координата Y
  myForm.coordYfix.value = myForm.coordY.value;
  // точка показывается
  myDot2.style.display="block";
  // и позициоируется
  myDot2.style.left = myForm.coordX.value+"px";
  myDot2.style.top = myForm.coordY.value+"px";
}

function moveDot(cursor) {
// функция перемещения точки над слоем с картой
  // точку надо показать
  myDot.style.display="block";
  if(!cursor) var cursor = window.event;
  myForm.coordX.value = "";
  myForm.coordY.value = "";
  var x = 0;
  var y = 0;
  if (cursor.pageX || cursor.pageY) {
    x = cursor.pageX;
    y = cursor.pageY;
  }
  else if (cursor.clientX || cursor.clientY) {
    x = cursor.clientX + document.body.scrollLeft;
    y = cursor.clientY + document.body.scrollTop;
  }
  x -= imageMapX;
  y -= imageMapY;
  x -= dX;
  y -= dY;
  // для наглядности координаты точки
  // показываются во временых полях формы
  // справа "X" и "Y"
  (x < 0) ? myForm.coordX.value = 0 : myForm.coordX.value = x;
  (y < 0) ? myForm.coordY.value = 0 : myForm.coordY.value = y;
  // если курсор не покинул слой с картой,
  // точка перемещается с курсором
  if (x > 0 && y > 0 && x < mapWdt && y  < mapHgt) {
    myDot.style.left = x+"px";
    myDot.style.top = y+"px";
  }
}

function getObj(name) {
// функция захвата объекта, используется при инициализации
  if (document.getElementById) return document.getElementById(name);
  else if (document.all) return document.all[name];
  else if (document.layers) return document.layers[name];
  else return false;
}

function findPosX(obj) {
// X-координата слоя
  var currleft = 0;
  if (obj.offsetParent)
    while (obj.offsetParent) {
      currleft += obj.offsetLeft
      obj = obj.offsetParent;
    }
  else if (obj.x) currleft += obj.x;
  return currleft;
}

function findPosY(obj) {
// Y-координата слоя
  var currtop = 0;
  if (obj.offsetParent)
    while (obj.offsetParent) {
      currtop += obj.offsetTop
      obj = obj.offsetParent;
    }
  else if (obj.y) currtop += obj.y;
  return currtop;
}

function init() { // инициализация
// смещение для точки
  dX = 7;
  dY = 7;
// форма
  myForm = getObj("mapForm");
// слой с картой
  imageMap = getObj("schemePlace");
  imageMap.onmouseover = getCoords;
// ширина и высота слоя - смещение
// чтобы точка за пределы картинки
// даже не думала уходить
  mapWdt = imageMap.offsetWidth - dX;
  mapHgt = imageMap.offsetHeight - dY;
// точки
  myDot = getObj("magDot");
  myDot2 = getObj("magDot2");
}


// ожидание загрузки страницы
// и вызов функции инициализации
try {
  window.addEventListener("load", init, false);
} catch(e) {
  window.onload = init;
}

Мне кажется в коде достаточно комментариев, чтобы разобраться со скриптом. Кратко опишу что в нем происходит. Определяю и отслеживаю положение слоя с картой в окне браузера. Отслеживаю координаты курсора мыши. И, когда курсор перемещается над слоем с картой, перемещаю вместе с ним точку и показываю ее координаты. При клике оставляю в месте клика точку другого цвета и записываю ее координаты. Как видите, все просто.

В заключение:

Надеюсь, вам не составит труда адаптировать код примера для своих нужд. Я умышленно не стал усложнять скрипт размещением нескольких точек на карте. Добавить такую возможность не сложно. А обработка данных на сервере выходит за рамки тематики этого сайта, поэтому сами решйте что и как будете делать с полученными координатами.

Посмотреть пример и его исходный код можно по ссылке: http://xhtml.ru/examples/map/, а скачать архив с файлами изображений можно по ссылке: http://xhtml.ru/examples/map/map.zip.



Много комментариев (19) к “Координаты курсора над слоем, расставляем точки”

  1. Ivan Shumkov :

    Олдскульный очень у вас JS


  2. Баранов Андрей :

    Ivan Shumkov, спасибо
    да, написан он не сегодня, из закромов достал…


  3. BOLK :

    У меня иногда получаются отрицательные координаты, во время быстрого выхода за слой :) Opera 9.01


  4. Граф Ноль :

    У миня тож отрицатильынйе плучайуццо


  5. Баранов Андрей :

    BOLK, Граф Ноль, если речь о правой колонке с координатами, то это и не важно, т.к. эти поля здесь лишь для того, чтобы продемонстрировать изменение координат, анимация. Точка фиксируется по клику, а ее координаты в полях слева (красный цвет).
    Конечно, перед выводом координат можно проверять и обнулять отрицательные значения.
    Например так:
    (x < 0) ? myForm.coordX.value = 0 : myForm.coordX.value = x;
    (y < 0) ? myForm.coordY.value = 0 : myForm.coordY.value = y;


  6. Ведущая Бурильная Труба :

    В ФФ видно толкьо точку, которая ставится при клике (к чему бы это?). В ИЕ появляются полосы прокрутки о_О

    А вообще большое спасибо, как раз искал, как определить координаты курсора.


  7. Жорик :

    подскажите как можно перенести координатные оси ? мне нужно чтоб оси были в центре

    не так
    ^
    |
    |
    |
    |________>

    а вот так

    ……….^
    ……….|
    ……….|
    ……….|
    ……….|
    __________+__________>
    ……….|
    ……….|
    ……….|
    ……….|
    ……….|
    точки не нужны


  8. Zx :

    объясните пожалуйста, как сделать так, чтобы можно было размещать несколько точек


  9. Server :

    Zx, скачай prototype.js (или JQuery). Там прочитав документация, сразу догадаешься.


  10. Xternat :

    В дизе пригодится. tnx


  11. FoxMALDER :

    (x


  12. mmproject :

    to Жорик:
    “подскажите как можно перенести координатные оси”
    отнимай определенное значение от каждой координаты и все

    to Баранов Андрей:
    по моему, можно еще проще сделать
    (event.offsetX & e.layerX), сложно у вас как-то

    ps
    а в FF правда только поставленную точку видно


  13. Баранов Андрей :

    Точка в Firefox:

    в функцию function getCoords() следует добавить imageMap.onmouseover = moveDot;


  14. almarein - elven city :

    броузер Макстон (”типа” ИЕ6). когда происходит mouseOut, жёлтый маркер остаётся на краю карты видимым, не исчезает. на сколько я понял он должен исчезать?


  15. Alexandr :

    в примере
    http://xhtml.ru/examples/map/
    в 7-ом эксплорере неверные координаты при прокрутке страницы.
    а на этой странице все впорядке…

    вобщем решил ту проблему так:

    function moveDot(cursor) {
    myDot.style.display=’block’;
    if(!cursor) var cursor = window.event;
    myForm.coordX.value = ”;
    myForm.coordY.value = ”;
    var x = 0;
    var y = 0;
    if (cursor.pageX || cursor.pageY) {
    x = cursor.pageX;
    y = cursor.pageY;
    }
    else if (cursor.clientX || cursor.clientY) {
    var scrollX = 0, scrollY = 0;
    if (document.body && typeof document.body.scrollTop != “undefined”) {
    scrollX += document.body.scrollLeft;
    scrollY += document.body.scrollTop;
    if (document.body.parentNode && typeof document.body.parentNode.scrollTop != “undefined”) {
    scrollX += document.body.parentNode.scrollLeft;
    scrollY += document.body.parentNode.scrollTop;
    }
    } else if (typeof window.pageXOffset != “undefined”) {
    scrollX += window.pageXOffset;
    scrollY += window.pageYOffset;
    }
    x = cursor.clientX + scrollX;
    y = cursor.clientY + scrollY;
    }
    x -= imageMapX;
    y -= imageMapY;
    x -= dX;
    y -= dY;

    (x 0 && y>0 && x


  16. Ktu :

    вот тут http://www.kolomna-kreml.ru/kremlinmap/ есть класс для отображения карты с маркерами и разными уровнями масштабирования. Может кому пригодиццо.


  17. интернет бизнес :

    Кладезень просто . клас. прикручу сейчас на сайтего один. )


  18. NaZakate :

    Спасибо, нтересный мануал)


  19. scoolooptonypon :

    hey ))
    its very interesting point of view.
    Good post.
    realy gj

    thx :-)



22 queries 0.261 seconds.