Hola de nuevo :
Es evidente que el enlace que puse más arriba no contiene un código serio (me refiero al segundo que posteé). Voy a aprovechar que encontraste una manera de medir la distancia,
PMP, y lo combino con la recomendación de
JavierB de usar las coordenadas del puntero para hacer un ejemplo funcional y así reivindicarme.
Código:
<HTML><HEAD>
<SCRIPT language=JavaScript>
var equis, ye;
function posMouse(){
equis=window.event.x;
ye=window.event.y;
window.status=(equis+document.body.scrollLeft)+" "+(ye+document.body.scrollTop);
}
function posElem(){
elm=document.elementFromPoint(equis, ye);
var corr=(elm.tagName=="BODY")? 0 : 2;
var Top = elm.getBoundingClientRect().top + document.body.scrollTop-corr;
var Left = elm.getBoundingClientRect().left + document.body.scrollLeft-corr;
alert("X = "+Left+" ; Y = "+Top)
}
</SCRIPT>
<STYLE>
#alfa {
BACKGROUND: yellow; COLOR: fuchsia; CURSOR: crosshair; FONT: bold 30px fantasy; LEFT: 400px; POSITION: absolute; TOP: 350px
}
#bravo {
BACKGROUND: orange; COLOR: blue; CURSOR: crosshair; FONT: 30px cursive; LEFT: 500px; POSITION: absolute; TOP: 600px
}
#charly {
BACKGROUND: lime; COLOR: red; CURSOR: crosshair
}
#delta {
BACKGROUND: bisque; CURSOR: crosshair; MARGIN-LEFT: 10%; WIDTH:100PX
}
#eco {
BACKGROUND: silver; CURSOR: crosshair; HEIGHT: 50px; LEFT: 1000px; POSITION: absolute; TOP: 1000px; WIDTH: 50px
}
H1 {
COLOR: maroon; CURSOR: crosshair
}
</STYLE>
<BODY onclick=posElem() onmousemove=posMouse()>
<H2>(H2) Muestra las coordenadas de un elemento en el documento con un click.</H2>
<H1 title="H1">QWERTUERTYU IQWERTYUI QWEUIQW QWEUIQW ERTUERTYU IQWERTYUI ERTUERTYU <SPAN
id=charly title="CHARLY" >SPAN</SPAN> QWERTYUI</H1>
<IMG id=delta
src="http://www.forosdelweb.com/images/statusicon/forum_old.gif" title=DELTA><BR>
<DIV id=alfa title="ALFA" >DIV</DIV><BR>
<FONT id=bravo title="BRAVO" >FONT</FONT><BR>
<INPUT id=eco title="ECO" type=radio>
</BODY></HTML>
En todos los casos sigue dando esa diferencia de 2px, que no existe en el
BODY.
saludos
furoya