Javascript-форум - Отобразить координаты мыши над фотографией

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Отобразить координаты мыши над фотографией (https://javascript.ru/forum/dom-window/72584-otobrazit-koordinaty-myshi-nad-fotografiejj.html)

Отобразить координаты мыши над фотографией

Здравствуйте, уважаемые форумчане.
Как реализовать такую штуку: при наведении мыши на фото, в поле появляются координаты, которые относятся к фотографии. То есть, если фото 100х100, то в верхнем левом углу фотографии будет "0,0", в правом нижнем "100х100", учитывая, что реальный размер фото может по экрану быть растянут на 500х500.

Может есть какие-то jquery-либы?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img {
			width: 100%;
		}
	</style>
</head>
<body>
	<div>
		<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
	</div>
	<output></output>
</body>
<script>
	document.querySelector('img').onmousemove=function(e){
		var mb = this.naturalWidth/this.width;
		document.querySelector('output').value = Math.ceil(e.offsetX*mb)+'----'+Math.ceil(e.offsetY*mb);
	};
</script>
</html>

не нужны тут либы

или Math.floor вместо Math.ceil если хотите чтобы первый пиксель отображался как 0.

Глаза боялись - руки делали:

function MoveArea()
{
	if (mouseOnPhoto)
	{
		var e = window.event;
		var posX = e.clientX;
		var posY = e.clientY;
		
		var photo = $('#photo');
		
		var photoOffsetX = photo.offset().left;
		var photoOffsetY = photo.offset().top;
		
		var photoWidth = <?=$photoWidth;?>;
		var photoHeight = <?=$photoHeight;?>;
		
		var elemWidth = $('#photo').width();
		var elemHeight = $('#photo').height();
		
		var perWidth = (posX - photoOffsetX) / elemWidth;
		var perHeight = (posY - photoOffsetY) / elemHeight;
		
		var realX = Math.ceil( perWidth * photoWidth );
		var realY = Math.ceil( perHeight * photoHeight );
		
		//alert('pox: ' + photoOffsetX + ', poy: ' + photoOffsetY);
		
		//$('#area').css('');
		//console.log(elemWidth, elemHeight);
		
		$('#area').offset({top: posY-10, left:posX-120});
		
		var photoX = Math.floor();
		var photoY = Math.floor();
		
		$('#area').html(realX + ', ' + realY);
	}
}
</script>

<div id="area" class="fly"></div>
<img onmouseover="ShowArea()" onmouseout="HideArea()" onmousemove="MoveArea()" id="photo" src="<?=$path2?>" width="100%" />

Единственное, что пришлось добавить - это определение реального размера через PHP

j0hnik,
хм... не знал про naturalWidth..
а проблема с offset'ами решается?

в js есть свойство naturalWidth для img

https://developer.mozilla.org/ru/doc...MLImageElement

Цитата:

Сообщение от VolodinAS (Сообщение 477536)

j0hnik,
а проблема с offset'ами решается?

что с ними?

Цитата:

Сообщение от j0hnik (Сообщение 477537)

в js есть свойство для naturalWidth для img

https://developer.mozilla.org/ru/doc...MLImageElement

А расположение элемента на странице будет влиять?
Имею в виду, на странице фото расположено не в 0,0.. Или это в Вашем коде роли не играет?

так offset как раз и показывает координаты относительно элемента

вот хорошая статейка.
http://shpargalkablog.ru/2013/05/get...nside-div.html

Цитата:

Сообщение от j0hnik (Сообщение 477540)

Хм... Спасибо большое! Буду переделывать!