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

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

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

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

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

  X-координата: 
  
  X: 
  

  Y-координата: 
  
  Y: 
  

  

  

  

      
      
  

?зображение карты сделано фоном для 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 // если курсор не покинул слой с картой,
  // точка перемещается с курсором
  if (x > 0 && y > 0 && x // функция захвата объекта, используется при инициализации
  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;
}

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

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

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

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