position absolute javascript

[atapuerkasman]

Saludos!!! Tengo una aplicación que te dibuja un plano y he conseguido que dibuje encima de ese plano una serie de iconos. La aplicación se conecta a una bd que almacena las coordenadas x e y del icono. Mi duda es la siguiente:

Yo quiero que las coordenadas en las que me dibuje los iconos no dependan del tamaño de la pantalla, para lo cual lo que hago es dar las coordenadas tomando como punto de inicio la esquina superior-izquierda de la imagen de plano.

Aplico la siguiente cuenta para obtener las coordenadas:

coordenadax= e.clientX -document.getElementById("imagen").offsetLeft;

e.clientX=donde pincho el usuario q queria añadir el icono
offsetLeft= la distancia entre la posición de la imagen, y el borde de la página

de esta manera los iconos me los dibujara siempre en el mismo punto aunque el tamaño de la pantalla sea distinto.

Mi problema es que cuando intento dibujar la imagen en lugar de cogerme como punto de inicio la esquina superior_izquierda de la imagen, me coge la de la página. Me podríais decir que tengo mal en el código.

Esta es la manera en la que dibujo los iconos.

Código:

    <img id='"id"' src='./images/box.png' style='position:absolute;top:"+getCoordY()+"px;left:"+getCoordX()+"px;z-index:5'

[ocp001a]

primero: debes obtener la posición (X,Y) del elemento al que quieres hacer referencia, para saber su posición respecto a la página (body), y así sumar a las coordenadas que ya tienes. Yo lo hago con estas funciones:

Código Javascript:

function findPosX(obj,der){//el parámetro der es por si quieres saber la posición a la derecha del objeto en vez de la izquierda
        var obor=obj;
        var curleft = 0;
        if(obj.offsetParent)
            while(1){
                curleft += obj.offsetLeft;
                if(!obj.offsetParent)
                    break;
                obj = obj.offsetParent;
            }
        else if(obj.x)
            curleft += obj.x;
        if(der==1){
            curleft=curleft+obor.offsetWidth;
        }
        return curleft;
      }
    function findPosY(obj){
        var curtop = 0;
        if(obj.offsetParent)
            while(1){
                curtop += obj.offsetTop;
                if(!obj.offsetParent)
                    break;
                obj = obj.offsetParent;
            }
        else if(obj.y)
            curtop += obj.y;
        return curtop;
     }
 

[atapuerkasman]

Muchas gracias, el código funciona perfectamente. Lo he probado en crome y sin ningún tipo de problema.

Pero inexplicablemente en IE el metodo offsetTop no devuelve los valores que debería. ¿Sabes a que puede ser debido?

el método offsetLeft funciona bien pero offsetTop no.