En este grupo En todos

Foro de Javascript



Capturar coordenadas de una imagen

Gretel
Camaguey, Cuba
Escrito por Gretel Ramirez Arias
el 17/06/2010

Hola quisiera hacerle una pregunta de que manera puedo capturar las coordenadas de una imagen al hacer click sobre ella con el mouse. Saludos

Carlos Francisco
Ing. de sistemas una
Escrito por Carlos Francisco
el 17/06/2010

Existen métodos como el de crear un input type="image", y al ejecutar el submit, se enviarán las coordenadas. El problema es que su operación es para uso por ente ajeno, ejemplo un servicio PHP.

Si el interés es trabajarlo en el javascript del cliente, la programación se complica, al nivel de tener que crear un target hacia un popup, y recoger la información.

Otra forma seria el de conocer la posición de la imagen en la ventana de trabajo, y al hacer click tomar las coordenadas del ratón, dado que las mismas se emiten en función de la ventana de trabajo, las coordenadas dentro de la imagen serían la sustracción de la posición en la ventana con la posición de la imagen.

Gretel Ramirez Arias
Camaguey, Cuba
Escrito por Gretel Ramirez Arias
el 18/06/2010

Muchas gracias por reponder, podria decirme como puedo conocer la posición de la ventana de trabajo.

Carlos Francisco
Ing. de sistemas una
Escrito por Carlos Francisco
el 18/06/2010

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. Dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

function coordenadas(event){

x=event. ClientX; //retorna la coordenada x del puntero en la ventana de trabajo

y=event. ClientY; //retorna la coordenada y del puntero en la ventana de trabajo

document. GetElementById("x"). Value=x; //imprime la coordenada x en la etiqueta

document. GetElementById("y"). Value=y; //imprime la coordenada y en la etiqueta

}

</script>



</head>


<body>


<p>&nbsp;</p>

<form action="#" onmousemove="coordenadas(event)">

<label for="x">X: </label>

<input type="text" id="x">

<label for="y">Y: </label>

<input type="text" id="y">

</form>


<div style="width:200px; height:200px; border:#333333 thin solid; background:#666666" onmousemove="coordenadas(event)"


</body>

</html>


Al mover el ratón por el input o la capa (div), las etiquetas x e y suministraran las coordenadas del puntero en relación a la ventana de trabajo.

Gretel Ramirez Arias
Camaguey, Cuba
Escrito por Gretel Ramirez Arias
el 19/06/2010

Muchas gracias de nuevo por su ayuda, pero probé el código y no me funciona, pero logré hacerlo por esta via.

<html>
<head>
<title>Problema</title>
<script type="text/javascript">
function coordenadas(e)
{
var corx=document. GetElementById('corx');
var cory=document. GetElementById('cory');
if (window. Event)
{
corx.firstChild.nodeValue='coordenada x='+window.event.clientX;
cory.firstChild.nodeValue='coordenada y='+window.event.clientY;
}
else
{
corx.firstChild.nodeValue='coordenada x='+e. ClientX;
cory.firstChild.nodeValue='coordenada y='+e. ClientY;
}
}
</script>
<link rel="StyleSheet" href="estilos. Css" type="text/css">
</head>
<body>
<div style="width:200px; height:200px; border:#333333 thin solid; background:#666666" onclick="mover(event)"> </div>
<p id="corx">coordenada x=</p>
<p id="cory">coordenada y=</p>
</body>
</html>
</head>

Carlos Francisco
Ing. de sistemas una
Escrito por Carlos Francisco
el 19/06/2010

Felicitaciones.