I'm trying to create a navigation menu that is a table of 4x5 boxes. The top 4 should have radio-style behavior that brings up a different set of 16 boxes below it when clicked. I'm also trying to have a default set of boxes that display pictures when the page first initiates and no boxes are yet selected AND when a box is de-selected. Lastly, I'd need for another table to display once an actually link (of the 16) is selected. I've given this my best attempt over the past few days, but I'm getting nowhere fast. Any help would be majorly appreciated. Thanks.





CODE: [Select]<style>
[type='radio'] {
    opacity:0.01;
    z-index:100;
}

td{
background-color:#DDDDDD;
}

.fadepic{
opacity:0.3;
}
.fadepic:hover{
opacity:0.8;
cursor:cell;
}

.button4{
border:1px #FFCC00 solid;
color:#FFAA00;
letter-spacing:5px;
font-size:20px;
background-color:#222222;
cursor:pointer;
height:100px;}

.button4_selected {
border:2px #000000 solid;
background-color:#FFCC00;
cursor:pointer;
letter-spacing:7px;
font-size:22px;
font-weight:bold;}


.button4:hover {
border:2px #FFCC00 solid;
color:#FFCC00;
letter-spacing:5px;
font-size:20px;
background-color:#222222;
cursor:pointer;
height:100px;}

    .box{
        PADDING: 20px;
        display: none;
        margin-top: 20px;
    }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="main1"){
            $(".box").not(".main1").hide();
            $(".main1").show();
        }
        if($(this).attr("value")=="main2"){
            $(".box").not(".main2").hide();
            $(".main2").show();
        }
        if($(this).attr("value")=="main3"){
            $(".box").not(".main3").hide();
            $(".main3").show();
        }
        if($(this).attr("value")=="main4"){
            $(".box").not(".main4").hide();
            $(".main4").show();
        }
    });
});
</script>


<script type="text/javascript">
function setColor(what)
{
var thetds = document.getElementsByTagName('td');
for(var i = 0; i < thetds.length; i++)
{
if(thetds[i].className == 'button4_selected')
{
thetds[i].className = 'button4';
}
}
what.className = 'button4_selected';
}
</script>


<center><form>
<table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5>
<tr>
<td width="25%" onclick="setColor(this)" class="button4"><input type="radio" value="main1">EVENTS</input></td>
<td width="25%"  onclick="setColor(this)" class="button4"><input type="radio"   value="main2">CALENDAR</td>
<td width="25%" onclick="setColor(this)" class="button4"><input type="radio"  value="main3">DETAILS</td>
<td width="25%" onclick="setColor(this)" class="button4"><input type="radio"  value="main4">PLAYS</td></tr>
<tr>
</form>
</table>






<div id="home1">
<table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5>
<tr>
<td width="25%" height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell8.jpg" class="fadepic" width="240" height="100" id="cell1"></td>
<td width="25%"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell1.jpg"  class="fadepic" width="240" height="100" id="cell2"></td>
<td width="25%"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell2.jpg"  class="fadepic" width="240" height="100" id="cell3"></td>
<td width="25%"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell9.jpg"  class="fadepic" width="240" height="100" id="cell4"></td>
</tr>
<tr>
<td height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell5.jpg" class="fadepic" width="240" height="100" id="cell5"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell3.jpg"  class="fadepic" width="240" height="100" id="cell6"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell4.jpg"  class="fadepic" width="240" height="100" id="cell7"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell10.jpg"  class="fadepic" width="240" height="100" id="cell8"></td>
</tr>
<tr>
<td height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell9.jpg"  class="fadepic" width="240" height="100" id="cell9"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell5.jpg"  class="fadepic" width="240" height="100" id="cell10"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell6.jpg"  class="fadepic" width="240" height="100" id="cell11"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell1.jpg"  class="fadepic" width="240" height="100" id="cell12"></td>
</tr>
<tr>
<td height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell10.jpg"  class="fadepic" width="240" height="100" id="cell13"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell7.jpg"  class="fadepic" width="240" height="100" id="cell14"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell8.jpg"  class="fadepic" width="240" height="100" id="cell15"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell2.jpg"  class="fadepic" width="240" height="100" id="cell16"></td>
</tr>
</table>
</div>





<div class="main1 box">
<table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5>
<tr>
<td height="100" width="25%" height="100">LINK 1</td>
<td width="25%" height="100">LINK 2</td>
<td width="25%" height="100">LINK 3</td>
<td width="25%" height="100">LINK 4</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 5</td>
<td width="25%" height="100">LINK 6</td>
<td width="25%" height="100">LINK 7</td>
<td width="25%" height="100">LINK 8</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 9</td>
<td width="25%" height="100">LINK 10</td>
<td width="25%" height="100">LINK 11</td>
<td width="25%" height="100">LINK 12</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 13</td>
<td width="25%" height="100">LINK 14</td>
<td width="25%" height="100">LINK 15</td>
<td width="25%" height="100">LINK 16</td>
</tr>
</table>
</div>



<div class="main2 box">
<table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5>
<tr>
<td height="100" width="25%" height="100">LINK 1</td>
<td width="25%" height="100">LINK 2</td>
<td width="25%" height="100">LINK 3</td>
<td width="25%" height="100">LINK 4</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 5</td>
<td width="25%" height="100">LINK 6</td>
<td width="25%" height="100">LINK 7</td>
<td width="25%" height="100">LINK 8</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 9</td>
<td width="25%" height="100">LINK 10</td>
<td width="25%" height="100">LINK 11</td>
<td width="25%" height="100">LINK 12</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 13</td>
<td width="25%" height="100">LINK 14</td>
<td width="25%" height="100">LINK 15</td>
<td width="25%" height="100">LINK 16</td>
</tr>
</table>
</div>



<div class="main3 box">
<table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5>
<tr>
<td height="100" width="25%" height="100">LINK 1</td>
<td width="25%" height="100">LINK 2</td>
<td width="25%" height="100">LINK 3</td>
<td width="25%" height="100">LINK 4</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 5</td>
<td width="25%" height="100">LINK 6</td>
<td width="25%" height="100">LINK 7</td>
<td width="25%" height="100">LINK 8</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 9</td>
<td width="25%" height="100">LINK 10</td>
<td width="25%" height="100">LINK 11</td>
<td width="25%" height="100">LINK 12</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 13</td>
<td width="25%" height="100">LINK 14</td>
<td width="25%" height="100">LINK 15</td>
<td width="25%" height="100">LINK 16</td>
</tr>
</table>
</div>



<div class="main4 box">
<table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5>
<tr>
<td height="100" width="25%" height="100">LINK 1</td>
<td width="25%" height="100">LINK 2</td>
<td width="25%" height="100">LINK 3</td>
<td width="25%" height="100">LINK 4</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 5</td>
<td width="25%" height="100">LINK 6</td>
<td width="25%" height="100">LINK 7</td>
<td width="25%" height="100">LINK 8</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 9</td>
<td width="25%" height="100">LINK 10</td>
<td width="25%" height="100">LINK 11</td>
<td width="25%" height="100">LINK 12</td>
</tr>
<tr>
<td height="100" width="25%" height="100">LINK 13</td>
<td width="25%" height="100">LINK 14</td>
<td width="25%" height="100">LINK 15</td>
<td width="25%" height="100">LINK 16</td>
</tr>
</table>
</div>




<div class="FINAL box">
<table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=1 cellspacing=5>
<tr>
<td height="100" width="75%" height="100" colspan="3" rowspan="4">MAIN INFO</td>
<td width="25%" height="100">BACK LINK</td>
</tr>
<tr>
<td height="100" width="25%" height="100">ACTION LINK 1</td>
</tr>
<tr>
<td height="100" width="25%" height="100">ACTION LINK 2</td>
</tr>
<tr>
<td height="100" width="25%" height="100">ACTION LINK 3</td>
</tr>
</table>
</div>


</center>
[attachment deleted by admin to conserve space]OK, I kinda figured it out by myself. It's not pretty (or consice), though.

I'm still having trouble finding a way to have the pictures load when the page does. I'm using the logo as the radio button that brings those up, so basically I'd need a way to have that button selected and the value shown. Nothing I've tried (like adding "selected" to the input field) has worked.

I haven't added the randomized pictures yet, but I can figure that one out easily on my own. I would still love, however, to be able to deselect a radio button once chosen to return them to the default pictures. I've found script that works for deselection but couldn't get it to work here. Let me know if you'd like to see that.

Any help on any of that would be great. Thanks, as always.

Here's where I'm at:

[code]

 
[type='radio'] {
    display:none;
}

label[for=mainlogo], label[for=mainlogo]:hover,input[type="radio"]:checked+label[for=mainlogo]{
    display: block;
    text-align: left;
padding-top:10px;
border:0px #ffffff solid;
color:#FFAA00;
letter-spacing:5px;
font-size:20px;
background-color:#ffffff;
cursor:pointer;
height:60px;
}

label, input[type="radio"]:checked+label{
    display: block;
    text-align: center;
padding-top:45px;
border:2px #000000 solid;
color:#000000;
letter-spacing:5px;
font-size:13px;
background-color:#eeeeee;
cursor:pointer;
height:55px;
}


label:hover {
    display: block;
    text-align: center;
padding-top:45px;
border:2px #000000 solid;
color:#000000;
letter-spacing:5px;
font-size:13px;
background-color:#dddddd;
cursor:pointer;
height:55px;
font-weight:bold;
}



a.action{
    display: block;
    text-align: center;
padding-top:45px;
border:2px #000000 solid;
color:#ddd000;
letter-spacing:5px;
font-size:13px;
background-color:#444444;
cursor:pointer;
height:55px;
}


a.action:hover {
    display: block;
    text-align: center;
padding-top:45px;
border:2px #000000 solid;
color:#fff000;
letter-spacing:5px;
font-size:13px;
background-color:#222222;
cursor:pointer;
height:55px;
font-weight:bold;
}




label[for=maina],
label[for=mainb],
label[for=mainc],
label[for=maind]{
    display: block;
    text-align: center;
padding-top:40px;
border:2px #FFCC00 solid;
color:#FFAA00;
letter-spacing:5px;
font-size:20px;
background-color:#333333;
cursor:pointer;
height:60px;
}

label[for=maina]:hover,
label[for=mainb]:hover,
label[for=mainc]:hover,
label[for=maind]:hover{
border:2px #FFAA00 solid;
color:#FFCC00;
letter-spacing:5px;
font-size:20px;
background-color:#000;
cursor:pointer;
}

input[type="radio"]:checked+label[for=maina],
input[type="radio"]:checked+label[for=mainb],
input[type="radio"]:checked+label[for=mainc],
input[type="radio"]:checked+label[for=maind]{
    display: block;
    text-align: center;
padding-top:40px;
color:#000000;
height:60px;
border:2px #000000 solid;
background-color:#FFCC00;
cursor:pointer;
letter-spacing:5px;
font-size:22px;
font-weight:bold;
}






.fadepic{
opacity:0.3;
display: block;
text-align: center;
border:2px #000000 solid;
cursor:pointer;
height:100px;
width:235px;
}
.fadepic:hover{
opacity:0.8;
cursor:cell;
}



    .box{
        padding: 0px;
        display: none;
        margin-top: 0px;
    }






http://code.jquery.com/jquery.js">



$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="mainx"){
            $(".box").not(".mainx").hide();
            $(".mainx").show();
        }
        if($(this).attr("value")=="main1"){
            $(".box").not(".main1").hide();
            $(".main1").show();
        }
        if($(this).attr("value")=="main2"){
            $(".box").not(".main2").hide();
            $(".main2").show();
        }
        if($(this).attr("value")=="main3"){
            $(".box").not(".main3").hide();
            $(".main3").show();
        }
        if($(this).attr("value")=="main4"){
            $(".box").not(".main4").hide();
            $(".main4").show();
        }
        if($(this).attr("value")=="main5"){
            $(".box").not(".main5").hide();
            $(".main5").show();
        }
if($(this).attr("value")=="info1"){$(".box").not(".info1").hide();$(".info1").show();}
if($(this).attr("value")=="info2"){$(".box").not(".info2").hide();$(".info2").show();}
if($(this).attr("value")=="info3"){$(".box").not(".info3").hide();$(".info3").show();}
if($(this).attr("value")=="info4"){$(".box").not(".info4").hide();$(".info4").show();}
if($(this).attr("value")=="info5"){$(".box").not(".info5").hide();$(".info5").show();}
if($(this).attr("value")=="info6"){$(".box").not(".info6").hide();$(".info6").show();}
if($(this).attr("value")=="info7"){$(".box").not(".info7").hide();$(".info7").show();}
if($(this).attr("value")=="info8"){$(".box").not(".info8").hide();$(".info8").show();}
if($(this).attr("value")=="info9"){$(".box").not(".info9").hide();$(".info9").show();}
if($(this).attr("value")=="info10"){$(".box").not(".info10").hide();$(".info10").show();}
if($(this).attr("value")=="info11"){$(".box").not(".info11").hide();$(".info11").show();}
if($(this).attr("value")=="info12"){$(".box").not(".info12").hide();$(".info12").show();}
if($(this).attr("value")=="info13"){$(".box").not(".info13").hide();$(".info13").show();}
if($(this).attr("value")=="info14"){$(".box").not(".info14").hide();$(".info14").show();}
if($(this).attr("value")=="info15"){$(".box").not(".info15").hide();$(".info15").show();}
if($(this).attr("value")=="info16"){$(".box").not(".info16").hide();$(".info16").show();}
if($(this).attr("value")=="info17"){$(".box").not(".info17").hide();$(".info17").show();}
if($(this).attr("value")=="info18"){$(".box").not(".info18").hide();$(".info18").show();}
if($(this).attr("value")=="info19"){$(".box").not(".info19").hide();$(".info19").show();}
if($(this).attr("value")=="info20"){$(".box").not(".info20").hide();$(".info20").show();}
if($(this).attr("value")=="info21"){$(".box").not(".info21").hide();$(".info21").show();}
if($(this).attr("value")=="info22"){$(".box").not(".info22").hide();$(".info22").show();}
if($(this).attr("value")=="info23"){$(".box").not(".info23").hide();$(".info23").show();}
if($(this).attr("value")=="info24"){$(".box").not(".info24").hide();$(".info24").show();}
if($(this).attr("value")=="info25"){$(".box").not(".info25").hide();$(".info25").show();}
if($(this).attr("value")=="info26"){$(".box").not(".info26").hide();$(".info26").show();}
if($(this).attr("value")=="info27"){$(".box").not(".info27").hide();$(".info27").show();}
if($(this).attr("value")=="info28"){$(".box").not(".info28").hide();$(".info28").show();}
if($(this).attr("value")=="info29"){$(".box").not(".info29").hide();$(".info29").show();}
if($(this).attr("value")=="info30"){$(".box").not(".info30").hide();$(".info30").show();}
if($(this).attr("value")=="info31"){$(".box").not(".info31").hide();$(".info31").show();}
if($(this).attr("value")=="info32"){$(".box").not(".info32").hide();$(".info32").show();}
if($(this).attr("value")=="info33"){$(".box").not(".info33").hide();$(".info33").show();}
if($(this).attr("value")=="info34"){$(".box").not(".info34").hide();$(".info34").show();}
if($(this).attr("value")=="info35"){$(".box").not(".info35").hide();$(".info35").show();}
if($(this).attr("value")=="info36"){$(".box").not(".info36").hide();$(".info36").show();}
if($(this).attr("value")=="info37"){$(".box").not(".info37").hide();$(".info37").show();}
if($(this).attr("value")=="info38"){$(".box").not(".info38").hide();$(".info38").show();}
if($(this).attr("value")=="info39"){$(".box").not(".info39").hide();$(".info39").show();}
if($(this).attr("value")=="info40"){$(".box").not(".info40").hide();$(".info40").show();}
if($(this).attr("value")=="info41"){$(".box").not(".info41").hide();$(".info41").show();}
if($(this).attr("value")=="info42"){$(".box").not(".info42").hide();$(".info42").show();}
if($(this).attr("value")=="info43"){$(".box").not(".info43").hide();$(".info43").show();}
if($(this).attr("value")=="info44"){$(".box").not(".info44").hide();$(".info44").show();}
if($(this).attr("value")=="info45"){$(".box").not(".info45").hide();$(".info45").show();}
if($(this).attr("value")=="info46"){$(".box").not(".info46").hide();$(".info46").show();}
if($(this).attr("value")=="info47"){$(".box").not(".info47").hide();$(".info47").show();}
if($(this).attr("value")=="info48"){$(".box").not(".info48").hide();$(".info48").show();}
if($(this).attr("value")=="info49"){$(".box").not(".info49").hide();$(".info49").show();}
if($(this).attr("value")=="info50"){$(".box").not(".info50").hide();$(".info50").show();}
if($(this).attr("value")=="info51"){$(".box").not(".info51").hide();$(".info51").show();}
if($(this).attr("value")=="info52"){$(".box").not(".info52").hide();$(".info52").show();}
if($(this).attr("value")=="info53"){$(".box").not(".info53").hide();$(".info53").show();}
if($(this).attr("value")=="info54"){$(".box").not(".info54").hide();$(".info54").show();}
if($(this).attr("value")=="info55"){$(".box").not(".info55").hide();$(".info55").show();}
if($(this).attr("value")=="info56"){$(".box").not(".info56").hide();$(".info56").show();}
if($(this).attr("value")=="info57"){$(".box").not(".info57").hide();$(".info57").show();}
if($(this).attr("value")=="info58"){$(".box").not(".info58").hide();$(".info58").show();}
if($(this).attr("value")=="info59"){$(".box").not(".info59").hide();$(".info59").show();}
if($(this).attr("value")=="info60"){$(".box").not(".info60").hide();$(".info60").show();}
if($(this).attr("value")=="info61"){$(".box").not(".info61").hide();$(".info61").show();}
if($(this).attr("value")=="info62"){$(".box").not(".info62").hide();$(".info62").show();}
if($(this).attr("value")=="info63"){$(".box").not(".info63").hide();$(".info63").show();}
if($(this).attr("value")=="info64"){$(".box").not(".info64").hide();$(".info64").show();}
    });
});