Acà hice una funcion que calcula las distancias con respecto al eje 0,0
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#myLayer{width:297px; height:111px; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;}
#cont{position:relative; left:135px; top:24px; }
body {
margin-left: 0px;
margin-top: 0px;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function Coordenadas(obj)
{
objOriginal = obj;
var Yo = 0;
var Xo = 0;
while(obj.nodeName != "BODY")
{
Yo += parseInt(obj.offsetTop);
Xo += parseInt(obj.offsetLeft);
obj = obj.parentNode;
}
var X1 = parseInt(Xo) + parseInt(objOriginal.offsetWidth);
var Y1 = parseInt(Yo) + parseInt(objOriginal.offsetHeight);
alert("Xo= "+Xo+"\n X1="+X1+"\n Yo= "+Yo+"\n Y1= "+Y1);
}
//-->
</script>
</head>
<body>
<div id="cont" >
<div id="myLayer" onClick="Coordenadas(this)"></div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
<div align="center"><img src="http://img.clarin.com/suplementos/informatica/2005/06/01/homesimple.jpg" onClick="Coordenadas(this)" /></div></td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
</table>
<br />
<br />
</body>
</html>
Hay algunos factores que influyen y mucho...
1- si el layer tiene valor absoluto hay que tocar la funciòn para que calcule de otra manera. Para cualquier otro objeto (ej images) funciona bien porque usa referencias relativas.
2- El punto es que si no se setea el:
body {
margin-left: 0px;
margin-top: 0px;
}
se pierde precisiòn.
habria que buscar la vuelta para corregir esas desviaciones. voy a seguir mirandolo en mi casa sobre todo tema compatibilidad de browsers.
Saludos