Iframe coordinate problem
Need a little help if any anyone can.
Im trying to get the mouse coordinates in relation to the window when I click on any image. I can get the correct coordinates of the image in div1 but I cant get the correct coordinates in the image that is in the iframe. I tried firedobj.parentNode but that seems to be the body of the iframe and I cant go any higher to account for the offset of the iframe itself.
main.htm
<html>
<script language="JavaScript1.2">
<!--
var ie=document.all
var ns6=document.getElementById&&!document.all
function show(event) {
var firedobj=ns6? event.target : event.srcElement
el= document.getElementById(firedobj.id)
while (el.parentNode.nodeName!="BODY")
{
el = el.parentNode
tempx=tempx + el.offsetLeft
tempy=tempy + el.offsetTop
}
alert(tempx + "," + tempy)
}
//-->
<body>
<DIV id="div1" style="left:203px;width:240px;border:2px solid #FF0000;">
<img id="imagez" border="0" src="images/1.jpg" width="100" height="100" onmousedown="show(event);">
<iframe id="I2" src="frame2.htm" width="240" height="150" border="0" frameborder="0" style="background-color: #FFFFFF"></iframe>
<iframe id="I3" src="frame3.htm" width="240" height="150" border="0" frameborder="0" style="background-color: #FFFFFF"></iframe>
</DIV>
</body>
</html>
frame2.htm:
<html>
<body>
<img id="image1" border="0" src="images/1.jpg" width="100" height="100" onmousedown="top.show(event);">
img id="image2" border="0" src="images/2.jpg" width="100" height="100" onmousedown="top.show(event);">
img id="image3" border="0" src="images/3.jpg" width="100" height="100" onmousedown="top.show(event);">
</body>
</html>
any help is appriecated!
Re: Iframe coordinate problem
Well I think I have a partial solution but it doesnt work in every case. using this function I get get the coordinates for an image in an iframe and the offsets for the iframe itself but it wouldnt work if I had a nested iframe. I can access the elements in the iframe directly because the event occurs in it, I can access the elements on the top document using document.getElementById. The problem now appears to be that if I had nested iframes, I dont see any way to access the elements in the between the top document and the iframe the event occured in.
function show(event) {
var firedobj=ns6? event.target : event.srcElement
el= document.getElementById(firedobj.id)
while (el.nodeName!="BODY")
{
tempx=tempx + el.offsetLeft
tempy=tempy + el.offsetTop
el = el.parentNode
if (el.nodeName=="BODY"&&el.ownerDocument.parentWindow.name!="") //acount for 1 iframe
{
el= document.getElementById(el.ownerDocument.parentWindow.name)
}
alert(tempx + "," + tempy)
}
Here is an example of what I mean
<body>
<DIV id="div1" style="left:203px;width:240px;border:2px solid #FF0000;">
<iframe id="I2" src="frame2.htm" width="240" height="150" border="0" frameborder="0" style="background-color: #FFFFFF">
<iframe id="I3" src="frame3.htm" width="240" height="150" border="0" frameborder="0" style="background-color: #FFFFFF">
<iframe id="I4" src="frame4.htm" width="240" height="150" border="0" frameborder="0" style="background-color: #FFFFFF">
<img id="imagez" border="0" src="images/1.jpg" width="100" height="100" onmousedown="show(event);">
</iframe>
</iframe>
</iframe>
</DIV>
</body>
If I click on imagez, I can easily get the offsets in frame I4, and get its ID using el.ownerDocument.parentWindow.name. I have no way to know what frame the I4 frame is in (if it is in one) because I4 is not accessable via document.getElementById("I4"). The function above works but only if the object is one frame deep, its parent must be the top document for that function to work.
Any ideas?
