como saber la posicion de un elemento?

[vic4ever]

Hola, quiero colocar un menu en mi pagina, pero la posición de este dependera del elemento que le llame.

es decir, el menu se puede sacar desde varios enlaces, y quisiera mostrarlo cerca de quien lo llama.

el menu sera un div y el enlace estara en un img.

cuando pulso la imagen, hago visible la capa

Código PHP:

  function showMenu(src)
{
             //src es la imagen donde esta el evento onclick
    var menu = document.getElementById("menu");
    menu.style.display = '';
             menu.style.top =  //como obtengo la posicion de quien llama a la 
             menu.stule.left=   //funcion??
        
} 
   

alguna idea?

gracias.

[Boku]

Prueba a coger las coordenadas de la imágen, sabiendo las dimensiones de la imágen, puedes colocar la capa en relación a esas coordenadas.

Código PHP:

     //Aqui coges las coordenadas de la imagen
   var top = document.getElementById('imagen').top;
   var left = document.getElementById('imagen').left;

   top += distanciaTop;
   left += document.getElementById('imagen').width + distanciaLeft;

   /*Las distancias son lo que le sumarás a las coordenadas de la imágen para 
     situar donde quieras la capa.  En el caso de la propiedad left, deberás 
     sumarle el ancho de la imágen más otra cantidad para que no se te monte 
     la capa sobre ella.*/
   //Después puedes llamar a tu método con esas coordenadas 
   

Espero que te sirva de algo.

[vic4ever]

Gracias, pero no funciona.

no se puede hacer el.top y .left de las imagenes.

[José Molina]

Saludos

También ando en lo mismo, pero requiero saber la posición de un DIV.

Probe con el ejemplo de BOKU pero no funciona.

Alguna otra idea??

Gracias

[vic4ever]

Pues de momento lo unico que se me a ocurrido es utilizar las coordenadas del raton.

ya que hay que pinchar en la imagen, obtengo las cordenadas y muestro el menu relativo a esas coordenadas.

las coordenadas se obtienen asi.

X = e.clientX;
Y = e.clientY;

[mario2005]

Hola a todos, esto que propones se puede hacer manejando los objetos 'offsetParent' 'offsetTop' y 'offsetLeft'. Con los dos últimos calculamos la distancia o desplazamiento de un objeto respecto de la parte superior y parte izquierda respectivamente. Mediante 'offsetParent' calculamos el desplazamiento de los objetos padre, ya que las distancias que nos ofrecen 'offsetTop' y 'offsetLeft' son relativas al objeto padre.
Esta es la función que retorna la posición vertical exacta de un objeto:

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}

En definitiva, lo que hace la función es ir sumando el valor de la posición
de los diferentes elementos HTML que anidan al objeto en cuestión.

Para calcular la posición horizontal exacta y de esta forma obtener la coordenada (x,y), habría que repetir la función pero utilizando 'offsetLeft' en lugar de 'offsetTop'. Esto último no lo he probado, pero supongo que funcionará bien, la función que os he puesto, os aseguro que si rula.

Saludos.

[furoya]

Hola todos :

el tema ya se había tocado antes

Coordenadas de una imagen dentro de un documento

[vic4ever]

que maravilla lo bien que funciona!! ahora haber si consigo entender la funcion..

muchas gracias!!