SoloCodigo

Programación Web y Scripting => JavaScript => Mensaje iniciado por: venedan en Sábado 24 de Noviembre de 2007, 02:43

Título: Calcular Coordenadas Sobre Una Imagen
Publicado por: venedan en Sábado 24 de Noviembre de 2007, 02:43
bueno mi pregunta es la siguiente como hago para calcular las coordenadas de una imagen es decir que las coordenadas empiecen en la imagen desde 0 hasta el tamaño de la imagen por los momentos tengo este codigo


Código:
Código: Text
  1. <html>
  2. <head>
  3. <script language="javascript">
  4.  
  5. function coordenadas(even) {
  6.  
  7. var evento = window.event || even;
  8. var x = evento.clientX;
  9. var y = evento.clientY;
  10. alert(x+","+y);
  11.  
  12. }
  13.  
  14. </script>
  15. </head>
  16. <body>
  17.  
  18. <table  onClick="coordenadas(event)" align="center" height="655">
  19. <tr>
  20. <td   width="851" height="500px"  background="Mis imágenes/pixel10.jpg"></td>
  21. </tr>
  22. </table>
  23.  
  24.  
  25. </body>
  26. </html>
  27.  

y lo que hace es que al hacer click me muestra las coordenadas en un mensaje de alerta sobre una imagen que tengo en una tabla el problema es que con ese codigo las coordenadas me la da con respecto a el tamaño de la pagina es decir al comienzo de la imagen que deberia ser la coordenada (0,0) me da la coordenada (255,59) y quisiera saber como hacer para que las coordenadas me la muestre con respecto a la imagen se los agradeceria mucho saludos
Título: Re: Calcular Coordenadas Sobre Una Imagen
Publicado por: punteroNULO en Sábado 1 de Diciembre de 2007, 13:53
Para hacer eso primero debes calcular la posición que ocupa la imagen para restarsela a las coordenadas de la página.

Se utilizan las siguientes propiedades de los objetos:
Código: Text
  1.  
  2. offsetLeft - distancia horizontal del objeto respecto al contenedor (padre).
  3. offsetTop - distancia vertical del objeto respecto al contenedor (padre).
  4.  
  5. parent - apunta al objeto contenedor o padre
  6.  
  7.  

Constiste en calcular las distancias de los objetos a su superior en la jerarquía hasta llegar al BODY o HTML.

Las siguientes funciones calculan las distancia de un objeto respecto de los bordes de la página.
Código: Text
  1.  
  2. function distancia_izq(objeto)
  3.   {
  4.   // calula la distancia de un objeto con el lado izquierdo del navegador
  5.   dis_izq = objeto.offsetLeft;
  6.   objeto = objeto.offsetParent;
  7.   while (objeto.tagName != 'BODY' && objeto.tagName != 'HTML')
  8.     {
  9.     dis_izq += objeto.offsetLeft;
  10.     objeto = objeto.offsetParent;
  11.     }
  12.   dis_izq += objeto.offsetLeft;
  13.   return dis_izq;
  14.   }
  15.  
  16. function distancia_sup(objeto)
  17.   {
  18.   // calcula la distancia de un objeto con el lado superior del navegador
  19.   dis_sup = objeto.offsetTop;
  20.   objeto = objeto.offsetParent;
  21.   while (objeto.tagName != 'BODY' && objeto.tagName != 'HTML')
  22.     {
  23.     dis_sup += objeto.offsetTop;
  24.     objeto = objeto.offsetParent;
  25.     }
  26.   dis_sup += objeto.offsetTop;
  27.   return dis_sup;
  28.   }
  29.  
  30.