hi capitano,
The script below exposes the x/y coordinates of an HTML (vs. CSS) positioned image (named "testImage.gif"
for NS and IE from version 4. In this case the image is centered in a table. The image is conditionally nested in an <A> tag to accomodate the "onclick" event handler in NS4:
<html>
<head>
<script language="javascript">
d=document;
ID=(d.getElementById)?1:0;
ALL=(d.all)?1:0;
NS4=(d.layers)?1:0;
function showCoords(obj){
var x,y;
if(NS4){
x=obj.x;
y=obj.y;
}
if(ID||ALL){
x=obj.offsetLeft;
y=obj.offsetTop;
}
alert(x+'\n'+y);
}
</script>
</head>
<body>
<table width=100% height=100% border=0>
<tr>
<td align=center valign=middle>
<script language="javascript">
if(NS4){
d.write('<a onclick="showCoords(this);">');
}
</script>
<img src="testImage.gif" width=178 height=106 name="testImage" border=0 onclick="showCoords(this);">
<script language="javascript">
if(NS4){
d.write('</a>');
}
</script>
</td>
</tr>
</table>
</body>
</html>
The next script does the same for CSS positioned images, in this case contained in a DIV tag, again for NS4:
<html>
<head>
<style type="text/css">
#image{position:absolute;left:100;top:75;}
</style>
<script language="javascript">
d=document;
ID=(d.getElementById)?1:0;
ALL=(d.all)?1:0;
IE5=(ID&&ALL)?1:0;
NS6=(ID&!ALL)?1:0;
NS4=(d.layers)?1:0;
function showCoords2(objID){
var xName,yName,obj;
if(NS4){
xName="left";
yName="top";
obj=d.image;
}
if(IE5||ALL){
xName="pixelLeft";
yName="pixelTop";
obj=image.style;
}
if(NS6){
xName="offsetLeft";
yName="offsetTop";
obj=d.getElementById("image"
;
}
alert(obj[xName]+"\n"+obj[yName])
}
</script>
</head>
<body>
<div id="image">
<a href="#" onclick="showCoords2();">
<img src="testImage.gif" name="testImage" border=0>
</a>
</div>
</body>
</html>
So I guess I really was serious when I asked although I should of specified.