I'm trying to create a menu on my site that is a 4x5 grid. I've kinda designed the default state with the code below, but I'd like for that to be the 4 headers with the top 4 cells and the remaining cells to be random b&w pictures used as placeholders (on each refresh from a list of maybe 30 potential pics, not to be repeated at any given tiem). When a top cell is selected, I'd like for it to be highlighted and then for the images to be replaced with the 16 choices that are nested under that header. When another cell header is selected, the 16 cells below would correspond to that header. If at any time a selected header is pressed again, then the cells would return to their default state of having b&w pictures.
One more thing I'd like to add would be the integration of the Lightbox popup whenever a nested link is actually clicked. I've used the lightbox feature on my team plays page: http://www.50allstars.com/p/strategy.html but I'd like for this one to span across the bottom 16 cells with a scrollbar (if needed) and a red X in the upper right corner to return to the previous state.
I can't even begin to wrap my mind around how this can be done, but I'm willing to accept any advice, explain further, pay someone a little something through paypal, or whatever. Thanks a ton.
For convenience sake, here are the headers and the nested links:
EVENTS - local games, travel tournaments, team practices, scrimmages, conditioning, weekly workouts, monthly clinics, summer camps, tryouts, ability & agility combines, boot camps, private sessions
CALENDAR - Calendar sync, weekly timetable, practice outline, yearly breaks, January, February, March, April, May, June, July, August, September, October, Novemeber, December
DETAILS - ABCD Rosters, Cost, Attendance, Hall of fame, Email updates, Participation form, online store, new member checklist, parental tips, media, recruits, psychology, scholarships, job application, staff, membership management
PLAYS - triangle, side, iso, hype, lateral, polly, 180, pyramid, scale, tangent, right, three, zone offense, press break, baseline OOB, sideline OOB
<style>
.button4{
border:1px #ddd000 solid;
color:#ddd000;
letter-spacing:5px;
font-size:20px;
background-color:#222222;
height:100px;}
</style>
<table style="border:1px black solid; width:960px; text-align:center;font-family:arial;" border=2 cellspacing=0>
<tr>
<td width="25%" class="button4">EVENTS</td>
<td width="25%" class="button4">CALENDAR</td>
<td width="25%" class="button4">DETAILS</td>
<td width="25%" class="button4">PLAYS</td></tr>
<tr>
<td height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell8.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell1.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell2.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell9.jpg" width="240" height="100"></td>
</tr>
<tr>
<td height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell5.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell3.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell4.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell10.jpg" width="240" height="100"></td>
</tr>
<tr>
<td height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell9.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell5.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell6.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell1.jpg" width="240" height="100"></td>
</tr>
<tr>
<td height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell10.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell7.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell8.jpg" width="240" height="100"></td>
<td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell2.jpg" width="240" height="100"></td>
</tr>
</table>
