Newbie Spellweaver
- Joined
- Jun 7, 2007
- Messages
- 71
- Reaction score
- 0
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:
The site itself is located at
Code:
<!-- 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!