iframe - getting something to reload outside the iframe

smartphreak

not sure if this is the right forum but i will try explain myself.

lets start by giving the code

Expand|Select|Wrap|Line Numbers

 
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>TITLE</title>

<script type="text/javascript" src="loadiframes.js"></script>

<style type="text/css">

body    {

    margin:0 auto;

                width:900px;

    padding:0;

    background:#FFFFFF;

    }

</style>

</head>

<body>

<div align="center"><a href="mainlink.html"><img height="100" alt="" src="logo1.gif" width="400" border="0"></a></div>

<script type="text/javascript">

<!--

var rollOverArr=new Array();

function setrollover(OverImgSrc,pageImageName)

{

if (! document.images)return;

if (pageImageName == null)

    pageImageName = document.images[document.images.length-1].name;

rollOverArr[pageImageName]=new Object;

rollOverArr[pageImageName].overImg = new Image;

rollOverArr[pageImageName].overImg.src=OverImgSrc;

}

function rollover(pageImageName)

{

if (! document.images)return;

if (! rollOverArr[pageImageName])return;

if (! rollOverArr[pageImageName].outImg)

    {

    rollOverArr[pageImageName].outImg = new Image;

    rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;

    }

document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;

}

function rollout(pageImageName)

{

if (! document.images)return;

if (! rollOverArr[pageImageName])return;

document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;

}

//-->

</script>

<script type="text/javascript">

<!--

setrollover('link1_col2.gif',   'link1');

setrollover('link2_col2.gif', 'link2');

setrollover('link3_col2.gif',  'link3');

//-->

</script>
 
<div align="center"><a onmouseover="rollover('link1')" onmouseout="rollout('aboutme')" href="link1.html"><img height="20" alt="link1" src="link1_col1.gif" width="70" border="0" name=""></a> 

<a onmouseover="rollover('link2')" onmouseout="rollout('link2')" href="link2.php"><img height="20" alt="gallery" src="link2_col1.gif" width="70" border="0" name="link2"></a> 

<a onmouseover="rollover('contact')" onmouseout="rollout('link3')" href="link3.html"><img height="20" alt="contact" src="link3_col1.gif" width="70" border="0" name="contact"></a> </div>

<iframe src="frame1.php" width="700" height="700" name="content" id="content" align="right" frameborder="0">

    <p>Your browser does not support iframes</p>

</iframe>

<div align=center><a href="page1.php"></a></div>

<div align=center><a href="page2.php"></a></div>

<div align=center><a href="page3.php"></a></div>

<div align=center><a href="page4.php"></a></div>

<div align=center><a href="page5.php"></a></div>

</body>

</html>

this is the page which has the iframe in it... the problems is that the rollover links also open in the iframe...

How do i stop this? I am happy to play around and learn - just need a steer in the right direction. will you need to see the loadframes.js?

Thanks!

smartphreak

just thought i would load the javascript file as well...

Expand|Select|Wrap|Line Numbers

 
var pageCount = new Array(0,0,0,0);

window.onload = initFrames;
 
function initFrames()    {

    for (var i=0; i<document.links.length; i++) {

        document.links[i].onclick = writeContent;

        document.links[i].thisPage = i+1;

    }

}
 
function writeContent()    {

    pageCount[this.thispage]++;
 
    var contentWin = document.getElementById("content").contentWindow.document;
 
    contentWin.body.innerHTML = newText;

    return false;

}
 
window.onload = initFrame;

function initFrame()    {

    for( var i=0; i<document.links.length; i++)    {

        document.links[i].target = "content";

        document.links[i].onclick = setiFrame;

    }

}
 
function setiFrame() {
 
    document.getElementById("content").contentWindow.document.location.href = this.href;

    return false;

}

i think the problem lies in here, but i am not sure how to fix it.... any help would be great!

hsriat

So your rollovers are not working in iframe but with the rest of the page? Is it?

iframe doesn't share JavaScript files with main document. So along with the main page, you need to call the same JavaScript function for the HTML page shown in the iframe.

I hope I understood your problem, If not then tell me.

smartphreak

So your rollovers are not working in iframe but with the rest of the page? Is it?

iframe doesn't share JavaScript files with main document. So along with the main page, you need to call the same JavaScript function for the HTML page shown in the iframe.

I hope I understood your problem, If not then tell me.

all the links open in iframe i dont want the rollovers to. I wnat the rollover to open in their own browser window.

target=_parent makes all link refresh the brower and opens the appropriate php/html file. target=_top makes everything open in iframe.

does this explain it better.... would the link to the webpage help?

iframe - getting something to reload outside the iframe

Post your reply

Similar topics