adama31salem
06-03-2005, 07:13 PM
I am trying to use a single page that has a series of menu buttons. I am using hidden div tables to do this. I have no problem showing the first hidden table, but when I press the button on that page to go back, nothing happens.
Any help would be greatly appreciated. Attached is the code I am using. I have cut out all but the first button on the main page to make for shorter code.
<html>
<head>
<title>Country Artists Central</title>
<style type="text/css">
<!--
.MainMenu {
position:absolute;
left:450px;
top:200px;
z-index:512;
visibility:hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function hideAll() {
var divs = document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
if (divs[i].className == "MainMenu") {
divs[i].style.visibiltiy = "hidden";
}
}
}
function show(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'visible';
else if (document.getElementById && document.getElementById(object))
document.getElementById(object).style.visibility=' visible';
else if (document.all) {
document.all[object].style.visibility = 'visible';
document.all[object].style.zIndex = 100;
}
}
//--></script>
</head>
<body background=".\images\background1.jpg">
<table border="0" cellpadding="5" cellspacing="10" width="800">
<tr>
<td width="450" ></td>
<td width="350" >
<table border="0" cellpadding="5" cellspacing="10" width="350">
<tr><td align="center">
<img src=".\images\Title_Line1.jpg" width="350" height="75" alt="Country Artists"></br>
<img src=".\images\Title_Line2.jpg" width="175" height="75" alt="Country Artists">
</td>
</tr>
</table>
<div ID="Main1" STYLE="position:absolute; left:450px; top:200px; z-index:50; visibility:visible;">
<table border="0" cellpadding="5" cellspacing="10" width="350">
<tr>
<td width="350" align="center" >
<a href="#" onclick="hideAll();show('Top20');return false;">
<img src=".\images\main_button1.gif" width="183" height="28" border="0" alt="Top 20 Artists">
</a>
</td>
</tr>
<tr></tr>
<tr>
<td width="350" align="center" >
<a href="#" onclick="hideAll();show('Category');return false;">
<img src=".\images\main-button2.gif" width="183" height="28" border="0" alt="Categorized Artist List">
</a>
</td>
</tr>
<tr></tr>
<tr>
<td width="350" align="center" >
<a href="#" onclick="hideAll();show('All_Artist');return false;">
<img src=".\images\main-button3.gif" width="183" height="28" border="0" alt="All Artists List">
</a>
</td>
</tr>
<tr></tr>
<tr>
<td width="350" align="center" >
<a href="#" onclick="hideAll();show('Random');return false;">
<img src=".\images\main-button4.gif" width="183" height="28" border="0" alt="Random Artist Pages">
</a>
</td>
</tr>
<tr></tr>
<tr>
<td width="350" align="center" >
<img src=".\images\button-exit.gif" width="183" height="28" border="0" alt="Exit to Other Site">
</td>
</tr>
</table>
</div>
<div ID="Top20" class="MainMenu">
<table border="0" cellpadding="5" cellspacing="10" width="350" bgcolor="black">
<tr>
<td width="350" align="center" >
</td>
</tr>
<tr>
<td width="350" align="center" >
<img src=".\images\construction_bar1.gif" width="183" height="28" alt="Construction Bar1">
</td>
</tr>
<tr>
<td width="350" align="center" >
<img src=".\images\construction_image1.jpg" width="183" height="150" alt="Construction Image1">
</td>
</tr>
<tr>
<td width="350" align="center" >
<img src=".\images\construction_bar1.gif" width="183" height="28" alt="Construction Bar1">
</td>
</tr>
<tr></tr>
<tr>
<td width="350" align="center" >
</td>
</tr>
<tr>
<td width="350" align="center" >
<a href="#" onclick="hideAll();return false;">
<img src=".\images\main-button4.gif" width="183" height="28" border="0" alt="Back">
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Any help would be greatly appreciated. Attached is the code I am using. I have cut out all but the first button on the main page to make for shorter code.
<html>
<head>
<title>Country Artists Central</title>
<style type="text/css">
<!--
.MainMenu {
position:absolute;
left:450px;
top:200px;
z-index:512;
visibility:hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function hideAll() {
var divs = document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
if (divs[i].className == "MainMenu") {
divs[i].style.visibiltiy = "hidden";
}
}
}
function show(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'visible';
else if (document.getElementById && document.getElementById(object))
document.getElementById(object).style.visibility=' visible';
else if (document.all) {
document.all[object].style.visibility = 'visible';
document.all[object].style.zIndex = 100;
}
}
//--></script>
</head>
<body background=".\images\background1.jpg">
<table border="0" cellpadding="5" cellspacing="10" width="800">
<tr>
<td width="450" ></td>
<td width="350" >
<table border="0" cellpadding="5" cellspacing="10" width="350">
<tr><td align="center">
<img src=".\images\Title_Line1.jpg" width="350" height="75" alt="Country Artists"></br>
<img src=".\images\Title_Line2.jpg" width="175" height="75" alt="Country Artists">
</td>
</tr>
</table>
<div ID="Main1" STYLE="position:absolute; left:450px; top:200px; z-index:50; visibility:visible;">
<table border="0" cellpadding="5" cellspacing="10" width="350">
<tr>
<td width="350" align="center" >
<a href="#" onclick="hideAll();show('Top20');return false;">
<img src=".\images\main_button1.gif" width="183" height="28" border="0" alt="Top 20 Artists">
</a>
</td>
</tr>
<tr></tr>
<tr>
<td width="350" align="center" >
<a href="#" onclick="hideAll();show('Category');return false;">
<img src=".\images\main-button2.gif" width="183" height="28" border="0" alt="Categorized Artist List">
</a>
</td>
</tr>
<tr></tr>
<tr>
<td width="350" align="center" >
<a href="#" onclick="hideAll();show('All_Artist');return false;">
<img src=".\images\main-button3.gif" width="183" height="28" border="0" alt="All Artists List">
</a>
</td>
</tr>
<tr></tr>
<tr>
<td width="350" align="center" >
<a href="#" onclick="hideAll();show('Random');return false;">
<img src=".\images\main-button4.gif" width="183" height="28" border="0" alt="Random Artist Pages">
</a>
</td>
</tr>
<tr></tr>
<tr>
<td width="350" align="center" >
<img src=".\images\button-exit.gif" width="183" height="28" border="0" alt="Exit to Other Site">
</td>
</tr>
</table>
</div>
<div ID="Top20" class="MainMenu">
<table border="0" cellpadding="5" cellspacing="10" width="350" bgcolor="black">
<tr>
<td width="350" align="center" >
</td>
</tr>
<tr>
<td width="350" align="center" >
<img src=".\images\construction_bar1.gif" width="183" height="28" alt="Construction Bar1">
</td>
</tr>
<tr>
<td width="350" align="center" >
<img src=".\images\construction_image1.jpg" width="183" height="150" alt="Construction Image1">
</td>
</tr>
<tr>
<td width="350" align="center" >
<img src=".\images\construction_bar1.gif" width="183" height="28" alt="Construction Bar1">
</td>
</tr>
<tr></tr>
<tr>
<td width="350" align="center" >
</td>
</tr>
<tr>
<td width="350" align="center" >
<a href="#" onclick="hideAll();return false;">
<img src=".\images\main-button4.gif" width="183" height="28" border="0" alt="Back">
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>