[HTML/JAVASCRIPT/IFRAME]Big Website Question

[Ragus73]

Hey guys, I had a pretty big idea, but I am having trouble figuring how to turn it into code form... So basically I have a website going with buttons basically using javascript to change the form in the middle to insert text/images/iframes ect... What I want to do is make 1 button change the center form to show a bunch more buttons, when you click one of the new buttons that has appeared, then an iframe appears underneath all of the new buttons, while still inside the middle section. Click another button in the middle, and another iframe appears, old one dissapears...ect. It looks like its gonna be some heavy javascript code, which sadly, I do not claim very high proficiency. Heres a bit of code from one of main main buttons on the site:

<!-- Button 2 //-->
<script lang="javascript">
function setimg2()
{
document.getElementById('contentCell').innerHTML = "<div align='left'><H1><u>Announcements!</H1></u></div><IFRAME style='float:right' name='NewsIFrame' src='news_iframe.html' width='230' height='300' frameborder='0' scrolling='auto'></IFRAME>Stuff stuff stuff text ect..<br><h1><u>Old News</u></h1>Old stuff stuff text ect....";
document.getElementById('button2').innerHTML = '<img src="http://forum.ragezone.com/images/news1.png" alt="" name="Image2" id="Image2" border="0" width="220" height="33">';
document.getElementById('button4').innerHTML = '<img src="http://forum.ragezone.com/images/contact.png" alt="" name="Image4" id="Image4" onmouseover="MM_swapImage(\'Image4\',\'\',\'images/contact1.png\',0)" onmouseout="MM_swapImgRestore()" border="0" width="220" height="33">';
document.getElementById('button5').innerHTML = '<img src="http://forum.ragezone.com/images/comment.png" alt="" name="Image5" id="Image5" onmouseover="MM_swapImage(\'Image5\',\'\',\'images/comment1.png\',0)" onmouseout="MM_swapImgRestore()" border="0" width="220" height="33">';
document.getElementById('button6').innerHTML = '<img src="http://forum.ragezone.com/images/allied.png" alt="" name="Image6" id="Image6" onmouseover="MM_swapImage(\'Image6\',\'\',\'images/allied1.png\',0)" onmouseout="MM_swapImgRestore()" border="0" width="220" height="33">';
document.getElementById('button7').innerHTML = '<img src="http://forum.ragezone.com/images/career.png" alt="" name="Image7" id="Image7" onmouseover="MM_swapImage(\'Image7\',\'\',\'images/career1.png\',0)" onmouseout="MM_swapImgRestore()" border="0" width="220" height="33">';
}
</script>
<a href="javascript:;" onClick="setimg2()"><div id="button2"><img src="http://forum.ragezone.com/images/news.png" id="Image2" alt="" name="Image2" onmouseover="MM_swapImage('Image2','','images/news1.png',0)" onmouseout="MM_swapImgRestore()" border="0" width="220" height="33"></div></a>
<br>

The site itself is located at

You must be registered to see links

. Thanks for any help you can give me!

 

[Daevius]

Well, if ppl click the first button, you change the HTML using JS in the DIV below. Then, the HTML you insert, should contain a DIV and buttons with the onClick attribute which fills the inserted DIV.

 

[Ragus73]

Lol I was just about to post I had found a suitable alternative, but it was not that one . My alternative? a dhtml/javascript menu that extends when you hover the mouse over it .