Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

juliano.ma

[Resolvido] Coordenadas do mouse

Por , em Javascript

Recommended Posts

juliano.ma    0

juliano.ma
Postado

Olá,

 

estou tentando exibir as coordenas ao mover o mouse sobre uma imagem. Na verdade a função está funcionando perfeitamente, mas isso se a imagem estiver encostada a esquerda do "body".

 

Queria que as coordenadas fosse relativo somente a imagem, pois do jeito que está o script, quando eu centralizo a imagem no meio da página, ela mostra as coordenadas somando todo o espaço que ficou no 'left'.

 

function point(event)
{
	pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("img_point").offsetLeft;
	pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("img_point").offsetTop;
	document.getElementById('x').innerHTML = pos_x;
	document.getElementById('y').innerHTML = pos_y;
}
<img id="img_point" src="imagem.jpg" onmousemove="point(event)" width="500" height="250" />
<div id='x'></div>
<div id='y'></div>

Gostaria que não importasse onde a imagem estivesse, as coordenadas fosse sempre relativo a ela e não ao body.

Compartilhar este post

Link para o post
Compartilhar em outros sites

juliano.ma    0

juliano.ma
Postado

Você tem razão Maujor, colei só a parte essencial no post e realmente funciona em ambos os navegadores. O detalhe está quando eu tento centralizar a div container.

 

Testa esse script fazendo um favor...

 

<html>
<head>
<style>
body {
margin:0;
}

.container {
	width: 950px;
	position: relative;
	left: 50%;
	margin-left: -475px;
	border:1px solid red;
}


</style>
<script type="text/javascript">
function point(event)
{
        pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("img_point").offsetLeft;
        pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("img_point").offsetTop;
        document.getElementById('x').innerHTML = pos_x;
        document.getElementById('y').innerHTML = pos_y;
}
</script>
</head>
<body>
<div class='container'>
<div align='center' style ='position: relative;'>
<img id="img_point" src="imagem.jpg" onmousemove="point(event)" width="500" height="250" />
<div id='x'></div>
<div id='y'></div>
</div>
</div>
</body>
</html>

Então, penso que deve ter alguma propriedade javascript para ele começar a contar as coordenadas a partir da imagem apenas.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito