Styles in the head of index.html:
<style>
body {position: absolute; width: 100%; height: 100%; padding: 0px; margin: 0px; overflow: hidden}
html {overflow: hidden}
</style>
Script in index.html, just before the closing body tag(!!!):
<script>
if(self.location.search.substr(1)!=''){frames.ifr.location.href = self.location.search.substr(1)} else {frames.ifr.location.href = 'page1.html'}
</script>
Iframe in the body of index.html (change styles if you want):
<div style="position: absolute; left: 10%; top: 10%; right: 10%; bottom: 10%; background: white; border: 1px solid silver">
<iframe name="ifr" style="position: absolute; width: 100%; height: 100%; background: white" frameborder="0"></iframe>
</div>
Links in the body of index.html:
<a href="index.html?page1.html">page 1</a>
<a href="index.html?page2.html">page 2</a>
<a href="index.html?http://www.dynamicdrive.com">DynamicDrive</a>
or:
<a href="javascript: void(0)" onclick="location.href='index.html?page1.html'; return false">page 1</a>
<a href="javascript: void(0)" onclick="location.href='index.html?page2.html'; return false">page 2</a>
<a href="javascript: void(0)" onclick="location.href='index.html?http://www.dynamicdrive.com'; return false">DynamicDrive</a>
Background image in the body of index.html:
<div style="position:absolute;left:0px;top:0%;right:0px;bottom:0px;z-index:-1; opacity:1; filter:alpha(opacity=100)"><img src="your_image.jpg" style="position:absolute; left:0px; top:0px; width:100%; height:100%;" alt=""></div>
Links in the body of the iframed pages (=content pages; here: page1.html and page2.html):
<a href="javascript: void(0)" onclick="parent.location.href='index.html?page1.html'; return false">page 1</a>
<a href="javascript: void(0)" onclick="parent.location.href='index.html?page2.html'; return false">page 2</a>
<a href="javascript: void(0)" onclick="parent.location.href='index.html?http://www.dynamicdrive.com'; return false">DynamicDrive</a>
Script in the head of the iframed pages (=content pages; here: page1.html and page2.html):
<script src="orph.js"></script>
This script prevents (i) the iframed (content) pages to appear without their main page and (prevents) (ii) flicker in the main page when a new iframed page is loaded.
If you want to give another name to the main page (here: index.html) and / or to the (iframed) starting content page (here: page1.html), you must change all occurrences of 'index.htm' and / or 'page1.html' in the main page, in the content pages and in <script src="orph.js"></script>.
page 1