JavaScript Forum

**erict21** · 07:39 AM

Hi,

I would like to create the following thing:

I Have 2 panes.
On openig the webpage, in the left pane I will see a webpage within an iframe. In the right pane, I will see a page with a (background) image (also an iframe).

Now if I hover from the left to the right pane, I would like to change the page in the right pane to another webpage,
and the left pane should change to the page which was first in the right pane (= a standard background).

I got this sofar (I have 4 documents), but somehow I cannot get it done the way I described above. I guess I am on the wrong road doing what is underneath.
I hope somebody can help me a little here...

1. Frame

2. Left page

3. Right page (standard background)

4. New page
--------------------------------------------------

1. Frame

HTML Code:

<html>
<head>
<title>Frame test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function closeIframe() [
   var iframe = document.getElementById('someid');
   iframe.parentNode.removeChild(iframe);
   <!-- iframe.parentNode.appendChild(iframe); -->
   window.parent.document.open("newpage.html","_self","height=500,width=400,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,status=yes"); 
}
</script>
</head>
<body>
<a id="someid" onMouseOut="javascript: window.parent.document.getElementById('someid').parentNode.removeChild(window.parent.document.getElementById('someid'))" >
<IFRAME ID="someid"  SRC="leftpage.html" WIDTH="500" HEIGHT="400" SCROLLING="no" FRAMEBORDER="0">
</IFRAME>
<IFRAME ID="someid2"  SRC="rightpage.html" WIDTH="500" HEIGHT="400" SCROLLING="no" FRAMEBORDER="0">
</IFRAME>
 
</a>
</body>
</html>

2.Left Page

HTML Code:

<html>
<head>
<title>left page</title>
<body>
This is the left page
</body>
</html>

3. Right page

HTML Code:

<html>
<head>
<title>left page</title>
function showPane()
{
window.open("newpage.html","_self","resizable=no,scrollbars=no,toolbar=no,status=yes"); 
}
</script>
</head>
<body>
<a onMouseOver="showPane()"><img src="stdimage.jpg" border=0></a>
</body>
</html>

4. New Page

HTML Code:

<html>
<head>
<title>left page</title>
<body>
For example www.google.com
</body>
</html>

PS It is not neccesarily needed to be in iframes.
If there is another, simplier solution I would be very happy too...
(In the end there need to be more panes created, that only for info)

**erict21** · 12:03 PM

I got it allmost to work. There is only one tiny thing that isn't working yet, but I do not see why...
Now I got this in the main page, but 'onMouseOut' isn't reacting on anything:

HTML Code:

<html>
<head>
<title>iframe close</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
}
-->
</style>
<script type="text/javascript">
function showBackground(url,nr)
{
var frame= "frame"+=nr;
TW = parent.frame.document;
TW.open(url,frame,"height=700,width=1000,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,status=yes"); 
}
</script>
</head>
<body>
<IFRAME NAME="frame0" SRC="stdback.php?k=0" WIDTH="1000" HEIGHT="700" SCROLLING="no" FRAMEBORDER="0" onMouseOut="showBackground('stdback.php?k=0',nr=0);">
</IFRAME>
<IFRAME NAME="frame1" SRC="stdback.php?k=1" WIDTH="1000" HEIGHT="700" SCROLLING="no" FRAMEBORDER="0" onMouseOut="showBackground('stdback.php?k=1',nr=1);">
</IFRAME>
<IFRAME NAME="frame2" SRC="stdback.php?k=2" WIDTH="1000" HEIGHT="700" SCROLLING="no" FRAMEBORDER="0" onMouseOut="showBackground('stdback.php?k=2',nr=2);">
</IFRAME>
</body>
</html>

If I change the script in:

HTML Code:

function showBackground(url)
{
TW = parent.frame1.document;
TW.open(url,"frame1","height=700,width=1000,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,status=yes");

Then it will open the correct page in frame 1, and so it works for that frame.
I don't really see the difference when using a var passed by via html....

Does anybody else maybe?