controlling of my iframes

[runswick]

Hi

Ive set up a homepage with 5 iframes, they overlay each other and I have buttons to turn them on and off using the code in a button for each frame -

<div id="click" onclick="HideFrameWorld()"><img src="./images/world.jpg" height="72" width="72" class="auto-style1"></div>

this calls

<script type="text/javascript">
<!--
function HideFrameWorld() {
  var fr = document.getElementById ("World");
if(fr.style.display=="none") {
   fr.style.display="block";
}
else {
   fr.style.display="none";
  }
 }
//-->
</script>

This works fine for each iframe but the problem is when the page loads they are all on the screen at once and I have to close them all other than one to display properly.

Id like to be able to have the page load with one of the iframes visible.

The function of the buttons with the above code or similar will be to first close any iframes that are open perhaps with something similar to this [ive picked this up on the web but its css rather than js - would this be a problem?]

	iframe {
   display:none;}

Then to display the relevant frame. My frames are called

GoogleCal
Googlenews
Gallery
World
Bucketlist
Shares

Any help appreciated with this. Ive been playing around all morning and cant seem to get anywhere..

Thanks

[Padonak]

set all the iframes in the CSS {display:none;}
and skip the only one you want to be visible on page load

change the function to let it be much universal:

function HideFrameWorld(objID){
var fr = document.getElementById(objID);
if(fr.style.display=="none"){fr.style.display="block";}
else{fr.style.display="none";}
}

now you can show any iframe by it's id like HideFrameWorld('here_goes_the_id')

if you need only one iframe to be visible after this show/hide you need the other iframes to be hidden

// these are your iframes id's
var myiframes=['GoogleCal','Googlenews','Gallery','World,'Bucketlist','Shares'];

function HideFrameWorld(objID){
var fr = document.getElementById(objID);
if(fr.style.display=="none"){
fr.style.display="block";
// this hides the other iframes and skips the current
for(var i = 0; i < myiframes.length; i++){
if(myiframes[i]==objID){continue;}
else{document.getElementById(myiframes[i]).style.display='none';}
}
}
else{fr.style.display="none";}
}