Programación Web y Scripting > JavaScript
Calcular Coordenadas Sobre Una Imagen
(1/1)
venedan:
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 ---<html><head><script language="javascript"> function coordenadas(even) { var evento = window.event || even;var x = evento.clientX;var y = evento.clientY;alert(x+","+y); } </script></head><body> <table onClick="coordenadas(event)" align="center" height="655"><tr><td width="851" height="500px" background="Mis imágenes/pixel10.jpg"></td></tr></table> </body></html>
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
punteroNULO:
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 --- offsetLeft - distancia horizontal del objeto respecto al contenedor (padre).offsetTop - distancia vertical del objeto respecto al contenedor (padre). parent - apunta al objeto contenedor o padre
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 --- function distancia_izq(objeto) { // calula la distancia de un objeto con el lado izquierdo del navegador dis_izq = objeto.offsetLeft; objeto = objeto.offsetParent; while (objeto.tagName != 'BODY' && objeto.tagName != 'HTML') { dis_izq += objeto.offsetLeft; objeto = objeto.offsetParent; } dis_izq += objeto.offsetLeft; return dis_izq; } function distancia_sup(objeto) { // calcula la distancia de un objeto con el lado superior del navegador dis_sup = objeto.offsetTop; objeto = objeto.offsetParent; while (objeto.tagName != 'BODY' && objeto.tagName != 'HTML') { dis_sup += objeto.offsetTop; objeto = objeto.offsetParent; } dis_sup += objeto.offsetTop; return dis_sup; }
Navegación
Ir a la versión completa