Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: Radio buttons to show/hide divs  (Read 4829 times)

0 Members and 1 Guest are viewing this topic.

jonsan32

    Topic Starter


    Rookie
    Radio buttons to show/hide divs
    « on: April 25, 2016, 03:12:49 PM »
    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]
    If you only have a hammer, you tend to see every problem as a nail. I some times see my computer as a nail.

    jonsan32

      Topic Starter


      Rookie
      Re: Radio buttons to show/hide divs
      « Reply #1 on: April 29, 2016, 02:18:10 PM »
      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]
      <style>
       
      [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;
          }
      </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")=="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();}
          });
      });
      </script>



      <center><form>
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="0" cellspacing="5">
      <tr>
      <td width="50%" colspan="2"><input type="radio"  value="main5"  id="mainlogo" name="options"><label for="mainlogo"></label></td>
      <td width="50%" colspan="2"></td>
      </tr>
      <tr>
      <td width="25%" ><input type="radio" value="main1" id="maina" name="options"><label for="maina">EVENTS</label></td>
      <td width="25%" ><input type="radio"  id="mainb"  value="main2" name="options"><label for="mainb">CALENDAR</label></td>
      <td width="25%" ><input type="radio"  id="mainc" value="main3" name="options"><label for="mainc">DETAILS</label></td>
      <td width="25%"  ><input type="radio"  id="maind" value="main4" name="options"><label for="maind">PLAYS</label></td></tr>
      <tr>
      </form>
      </table>




      <div class="main5 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="0" cellspacing="5">
      <tr>
      <td width="25%"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell8.jpg" class="fadepic" id="cell1"></td>
      <td width="25%"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell1.jpg"  class="fadepic"  id="cell2"></td>
      <td width="25%"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell2.jpg"  class="fadepic" id="cell3"></td>
      <td width="25%"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell9.jpg"  class="fadepic"  id="cell4"></td>
      </tr>
      <tr>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell5.jpg" class="fadepic" id="cell5"></td>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell3.jpg"  class="fadepic" id="cell6"></td>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell4.jpg"  class="fadepic" id="cell7"></td>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell10.jpg"  class="fadepic" id="cell8"></td>
      </tr>
      <tr>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell9.jpg"  class="fadepic" id="cell9"></td>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell5.jpg"  class="fadepic" id="cell10"></td>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell6.jpg"  class="fadepic" id="cell11"></td>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell1.jpg"  class="fadepic" id="cell12"></td>
      </tr>
      <tr>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell10.jpg"  class="fadepic" id="cell13"></td>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell7.jpg"  class="fadepic" id="cell14"></td>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell8.jpg"  class="fadepic" id="cell15"></td>
      <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell2.jpg"  class="fadepic" 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 width="25%" ><input type="radio"  id="link1" value="info1" name="links"><label for="link1">LINK 1</label></td>   
      <td width="25%" ><input type="radio"  id="link2" value="info2" name="links"><label for="link2">LINK 2</label></td>   
      <td width="25%" ><input type="radio"  id="link3" value="info3" name="links"><label for="link3">LINK 3</label></td>   
      <td width="25%" ><input type="radio"  id="link4" value="info4" name="links"><label for="link4">LINK 4</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link5" value="info5" name="links"><label for="link5">LINK 5</label></td>   
      <td width="25%" ><input type="radio"  id="link6" value="info6" name="links"><label for="link6">LINK 6</label></td>   
      <td width="25%" ><input type="radio"  id="link7" value="info7" name="links"><label for="link7">LINK 7</label></td>   
      <td width="25%" ><input type="radio"  id="link8" value="info8" name="links"><label for="link8">LINK 8</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link9" value="info9" name="links"><label for="link9">LINK 9</label></td>   
      <td width="25%" ><input type="radio"  id="link10" value="info10" name="links"><label for="link10">LINK 10</label></td>   
      <td width="25%" ><input type="radio"  id="link11" value="info11" name="links"><label for="link11">LINK 11</label></td>   
      <td width="25%" ><input type="radio"  id="link12" value="info12" name="links"><label for="link12">LINK 12</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link13" value="info13" name="links"><label for="link13">LINK 13</label></td>   
      <td width="25%" ><input type="radio"  id="link14" value="info14" name="links"><label for="link14">LINK 14</label></td>   
      <td width="25%" ><input type="radio"  id="link15" value="info15" name="links"><label for="link15">LINK 15</label></td>   
      <td width="25%" ><input type="radio"  id="link16" value="info16" name="links"><label for="link16">LINK 16</label></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 width="25%" ><input type="radio"  id="link17" value="info17" name="links"><label for="link17">LINK 17</label></td>   
      <td width="25%" ><input type="radio"  id="link18" value="info18" name="links"><label for="link18">LINK 18</label></td>   
      <td width="25%" ><input type="radio"  id="link19" value="info19" name="links"><label for="link19">LINK 19</label></td>   
      <td width="25%" ><input type="radio"  id="link20" value="info20" name="links"><label for="link20">LINK 20</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link21" value="info21" name="links"><label for="link21">LINK 21</label></td>   
      <td width="25%" ><input type="radio"  id="link22" value="info22" name="links"><label for="link22">LINK 22</label></td>   
      <td width="25%" ><input type="radio"  id="link23" value="info23" name="links"><label for="link23">LINK 23</label></td>   
      <td width="25%" ><input type="radio"  id="link24" value="info24" name="links"><label for="link24">LINK 24</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link25" value="info25" name="links"><label for="link25">LINK 25</label></td>   
      <td width="25%" ><input type="radio"  id="link26" value="info26" name="links"><label for="link26">LINK 26</label></td>   
      <td width="25%" ><input type="radio"  id="link27" value="info27" name="links"><label for="link27">LINK 27</label></td>   
      <td width="25%" ><input type="radio"  id="link28" value="info28" name="links"><label for="link28">LINK 28</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link29" value="info29" name="links"><label for="link29">LINK 29</label></td>   
      <td width="25%" ><input type="radio"  id="link30" value="info30" name="links"><label for="link30">LINK 30</label></td>   
      <td width="25%" ><input type="radio"  id="link31" value="info31" name="links"><label for="link31">LINK 31</label></td>   
      <td width="25%" ><input type="radio"  id="link32" value="info32" name="links"><label for="link32">LINK 32</label></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 width="25%" ><input type="radio"  id="link33" value="info33" name="links"><label for="link33">LINK 33</label></td>   
      <td width="25%" ><input type="radio"  id="link34" value="info34" name="links"><label for="link34">LINK 34</label></td>   
      <td width="25%" ><input type="radio"  id="link35" value="info35" name="links"><label for="link35">LINK 35</label></td>   
      <td width="25%" ><input type="radio"  id="link36" value="info36" name="links"><label for="link36">LINK 36</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link37" value="info37" name="links"><label for="link37">LINK 37</label></td>   
      <td width="25%" ><input type="radio"  id="link38" value="info38" name="links"><label for="link38">LINK 38</label></td>   
      <td width="25%" ><input type="radio"  id="link39" value="info39" name="links"><label for="link39">LINK 39</label></td>   
      <td width="25%" ><input type="radio"  id="link40" value="info40" name="links"><label for="link40">LINK 40</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link41" value="info41" name="links"><label for="link41">LINK 41</label></td>   
      <td width="25%" ><input type="radio"  id="link42" value="info42" name="links"><label for="link42">LINK 42</label></td>   
      <td width="25%" ><input type="radio"  id="link43" value="info43" name="links"><label for="link43">LINK 43</label></td>   
      <td width="25%" ><input type="radio"  id="link44" value="info44" name="links"><label for="link44">LINK 44</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link45" value="info45" name="links"><label for="link45">LINK 45</label></td>   
      <td width="25%" ><input type="radio"  id="link46" value="info46" name="links"><label for="link46">LINK 46</label></td>   
      <td width="25%" ><input type="radio"  id="link47" value="info47" name="links"><label for="link47">LINK 47</label></td>   
      <td width="25%" ><input type="radio"  id="link48" value="info48" name="links"><label for="link48">LINK 48</label></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 width="25%" ><input type="radio"  id="link49" value="info49" name="links"><label for="link49">LINK 49</label></td>   
      <td width="25%" ><input type="radio"  id="link50" value="info50" name="links"><label for="link50">LINK 50</label></td>   
      <td width="25%" ><input type="radio"  id="link51" value="info51" name="links"><label for="link51">LINK 51</label></td>   
      <td width="25%" ><input type="radio"  id="link52" value="info52" name="links"><label for="link52">LINK 52</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link53" value="info53" name="links"><label for="link53">LINK 53</label></td>   
      <td width="25%" ><input type="radio"  id="link54" value="info54" name="links"><label for="link54">LINK 54</label></td>   
      <td width="25%" ><input type="radio"  id="link55" value="info55" name="links"><label for="link55">LINK 55</label></td>   
      <td width="25%" ><input type="radio"  id="link56" value="info56" name="links"><label for="link56">LINK 56</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link57" value="info57" name="links"><label for="link57">LINK 57</label></td>   
      <td width="25%" ><input type="radio"  id="link58" value="info58" name="links"><label for="link58">LINK 58</label></td>   
      <td width="25%" ><input type="radio"  id="link59" value="info59" name="links"><label for="link59">LINK 59</label></td>   
      <td width="25%" ><input type="radio"  id="link60" value="info60" name="links"><label for="link60">LINK 60</label></td>   </tr><tr>
      <td width="25%" ><input type="radio"  id="link61" value="info61" name="links"><label for="link61">LINK 61</label></td>   
      <td width="25%" ><input type="radio"  id="link62" value="info62" name="links"><label for="link62">LINK 62</label></td>   
      <td width="25%" ><input type="radio"  id="link63" value="info63" name="links"><label for="link63">LINK 63</label></td>   
      <td width="25%" ><input type="radio"  id="link64" value="info64" name="links"><label for="link64">LINK 64</label></td>   </tr></table>
      </div>










       








      <div class="info1 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info2 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info3 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info4 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info5 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info6 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info7 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info8 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info9 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info10 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info11 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info12 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info13 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info14 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info15 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info16 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 1</td>
      <td width="25%" ><input type="radio"  id="backa" value="main1" name="links"><label for="backa">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>





      <div class="info17 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 17</td>
      <td width="25%" ><input type="radio"  id="backb" value="main2" name="links"><label for="backb">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info18 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 17</td>
      <td width="25%" ><input type="radio"  id="backb" value="main2" name="links"><label for="backb">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info19 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 17</td>
      <td width="25%" ><input type="radio"  id="backb" value="main2" name="links"><label for="backb">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info20 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 17</td>
      <td width="25%" ><input type="radio"  id="backb" value="main2" name="links"><label for="backb">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info21 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 17</td>
      <td width="25%" ><input type="radio"  id="backb" value="main2" name="links"><label for="backb">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info22 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 17</td>
      <td width="25%" ><input type="radio"  id="backb" value="main2" name="links"><label for="backb">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info23 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 17</td>
      <td width="25%" ><input type="radio"  id="backb" value="main2" name="links"><label for="backb">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info24 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 17</td>
      <td width="25%" ><input type="radio"  id="backb" value="main2" name="links"><label for="backb">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info25 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 17</td>
      <td width="25%" ><input type="radio"  id="backb" value="main2" name="links"><label for="backb">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info26 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 17</td>
      <td width="25%" ><input type="radio"  id="backb" value="main2" name="links"><label for="backb">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info27 box">
      <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border="1" cellspacing="5"><tr>
      <td width="75%" height="100" colspan="3" rowspan="4" style="border:4px black solid;">MAIN INFO 17</td>
      <td width="25%" ><input type="radio"  id="backb" value="main2" name="links"><label for="backb">GO BACK</label></td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 1[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 2[/url]</td></tr><tr>
      <td width="25%" ><a herf="#" class="action">ACTION LINK 3[/url]</td></tr></table>
      </div>
      <div class="info28 box">
      <table style="border:0px black solid; width:990px; text-align:center;fo
      If you only have a hammer, you tend to see every problem as a nail. I some times see my computer as a nail.