Preserved Topic: IFRAME Positioning (Page 1 of 1)

I'm trying to position an iframe with a tranparent background over an image (an interface) so that the text can be dynamic over the image.

I looked at some previous posts and found something interesting.

document.getElementById('head_right').offsetTop

I noticed that I can get the top and the left by using the imgID of the image that I have. The problem is how do I get this numeric value into the Style="position: top: Y; left: X;" tag???

It's had me fubar for some time now.

Current Iframe looks like this:

<IFRAME NAME="content" ID="content" SCROLLING="auto" frameborder="0" STYLE="position:absolute; top:document.getElementById('head_right').offsetTop; left:document.getElementById('head_right').offsetTop; width:295; height:60; z-index:2" SRC="desc/default_desc.html" ALLOWTRANSPARENCY="true">


The image is in a table by itself atm if that helps any.

Thanks for the help beforehand!

Hmm this may be difficult.

Try placing the iframe in a div.
(<div id = yadda><iframe></iframe></div> )

Then move the div
document.all.yadda.style.left = posx;

etc.

iframes are really cool bet extremely propietary so they have some issues.


Walking the Earth like Kane

Ok well this isn't working.

I have an image lets say 400 by 400 pixels. I then have this image somewhere in a resizable table (so it could be anywhere), I can have this in it's own Table (which I have now) or I can just use a TD for it in a shared table with other pieces of the page. I then want to overlay an iframe lets say on the inner 300x300 pixels of the image so that I can have scrollable text in there.

The problem I'm having is I can't for the life of me get the coordinates for the top left of the image, or the TD or the TABLE or the DIV that starts inside the TD. I tried
document.getElementById('divID').offsetLeft
document.getElementById('imgID').offsetLeft

Neither of them worked.

I also tried just the
var x = document.all.divid.style.left;
and that didn't work either.

I've tried just about everything I can possibly think of and find on the MSDN iframe pages about positioning. Obviously I must be doing something incorrect.

I just tried
document.all.content.style.left = 20 + document.all.content.style.left;
document.all.content.style.top = 50 + document.all.content.style.top;

It moves it to start at 20,50.

<td><div id="posDiv"><IFRAME NAME='content' ID='content' SCROLLING='auto' frameborder='0' STYLE='position:absolute; width:295; height:60; z-index:2' SRC='desc/default_desc.html' ALLOWTRANSPARENCY='true'></iframe></div><img id="head_right" src="/images/header_right_linux.gif" width="367" height="140" border="0" alt=""></td>


If I don't move the iframe, whose ID is content btw, it starts at the top left of the image....


I can't move the DIV using the lines you gave me above. But I can move the iframe around no problem.


Any one have any ideas please?

Carnage



[This message has been edited by Carnage (edited 06-08-2001).]

I don;t know if this is the thing you need or not.

1.
well, you could tell the image where to be and then put the iframe over it.
<div id="img" style="position:absolute; top:50px; left:50px;">
<img src="yourimg.gif">
</div>
<iframe id="content" style="position:absolute; top:50px; left:50px;">
<p> manyamanjiamania...content</p>
</iframe>

2.
hey, what happens if you put in:
alert(document.getElementById('divID').offsetLeft);
?
normally, if you run the script it'll tell you the offsetLeft in a warning pop-up.
If it gives you a number, that's the offset.
If not, the position hasn;t been declared.
[
It knows where to be and so on but it doesn't have that information in the style-tag.
]
You'ld have to give the image exact coordinates by using style="position:absolute; left:numberinpx; right:numberinpx
(no it should have something to refer to.


3. (may be you alredy tried this one here...)(never mind, I read through and You trird it)
if this "document.getElementById('head_right').offsetTop" really works (which I suppose... *g*)

var x=document.getElementById('head_right').offsetTop;
var y=document.getElementById('head_right').offsetLeft;

(this is IE)
document.all.content.offsetTop=x;
document.all.content.offsetLeft=y;




only change remains