[JS] Определение координат курсора на изображении

[JS] Определение координат курсора на изображении

30.07.2009, 08:45

Kuzya

Участник форума

Регистрация: 27.04.2008

Сообщений: 224

С нами: 9494306

Репутация: 313

[JS] Определение координат курсора на изображении

Здравствуйте. У меня имеется изображение огромных размеров (3000px*4000px). При клике мышью на любую точку этой картинки мне нужно вычислить и показать координаты курсора. И именно не от начала экрана, а от начала изображения. Подскажите пожалуйста, как это сделать?

𝕏 Twitter Reddit Telegram Копировать ссылку

30.07.2009, 10:17

FireFenix

Постоянный

Регистрация: 03.06.2009

Сообщений: 385

С нами: 8915117

Репутация: 389

Ничего сложного... позиция на экране минус смещение нкартинки, получаем абсолютную позицию на картинке

Пример :

PHP код:


		
			
<script language="javascript">



function mousePageXY(elem)

{

  var x = 0, y = 0;



  y_offset = elem.offsetTop;

  x_offset = elem.offsetLeft;



  if (window.event.pageX || window.event.pageY)

  {

    x = window.event.pageX;

    y = window.event.pageY;

  }

  else if (window.event.clientX || window.event.clientY)

  {

    x = window.event.clientX + 

      (document.documentElement.scrollLeft || document.body.scrollLeft) - 

      document.documentElement.clientLeft;

    y = window.event.clientY + 

      (document.documentElement.scrollTop || document.body.scrollTop) - 

      document.documentElement.clientTop;

  }



  window.status = "X:" + (x - x_offset) + ' - Y:' + (y - y_offset);

}



</script>



<img id="img" src="image.jpg" onmousemove="javascript:mousePageXY(this);" onclick="alert();">

Слева внизу в статусе отобразятся координаты курсора на картинке, при передвижении курсора по картинке