Help Neede with Javascript Tabs

I don’t usually venture over into the forest, but i need a bit of help with some javascript i am creating for my new site. It’s for a set of tabs, and i am having trouble with getting the click event to work proberly. The tabs are built with tables, to make a 3d button effect.

The page is here: http://test-server.reaper-media.com/source/pages/home.html (i know it isn’t a full html page, it’s just the way i’m stucturing my site with php, this page is just the content of the home page )

Basically, i cant get the click event to work properly. It’s supposed to change the background colors, and div style and a javascript variable. The variable doesn’t even change!

var currentTab = 1
totalTabs  = 3

function rollOverTab(tabID){
    if(tabID != currentTab){
        textDIV = "tab" + tabID + "text" 
        document.getElementById(textDIV).className = "style2" 
        document.body.style.cursor = 'pointer'
    }
}

function rollOutTab(tabID){
    if(tabID != currentTab){
        textDIV = "tab" + tabID + "text" 
        document.getElementById(textDIV).className = "style1" 
        document.body.style.cursor = 'default'
    }
}

function clickTab(tabID){
    if(tabID != currentTab){
        textDIV = "tab" + tabID + "text" 
        document.getElementById(textDIV).className = "style2" 
        cellDiv = "tab" + tabID + "table" 
        for(i=0;i<totalTabs;i++){
            currentCell = "tab" + i + "table" 
            document.getElementById(currentCell).style.backgroundColor = "#CCCCCC"        
        }
        document.getElementById(cellDiv).style.backgroundColor = '#6591A3'
        document.body.style.cursor = 'default'
        currentTab = tabID
    }
}

<table cellspacing="0" border="0" cellpadding="1" width="100%">
            <tr>
              <td bgcolor="#6591A3" onmouseover="rollOverTab(1)" id="tab1table" onmouseout="rollOutTab(1)" onclick="clickTab(1)" width="150"><table bgcolor="#FFFFFF" cellspacing="0" border="0" cellpadding="1" width="100%">
                <tr>
                  <td><table bgcolor="#CCCCCC" cellspacing="0" background="/source/tabbg1.png" border="0" height="29" cellpadding="5" width="100%">
                    <tr>
                      <td height="29"><div class="style2" id="tab1text" align="center">Stock Flash Items</div></td>
                    </tr>
                  </table></td>
                </tr>
              </table></td>
              <td width="5"> </td>
              <td bgcolor="#CCCCCC" onmouseover="rollOverTab(2)" id="tab2table" onmouseout="rollOutTab(2)" onclick="clickTab(2)" width="150"><table bgcolor="#FFFFFF" cellspacing="0" border="0" cellpadding="1" width="100%">
                <tr>
                  <td><table bgcolor="#CCCCCC" cellspacing="0" background="/source/tabbg1.png" border="0" height="29" cellpadding="5" width="100%">
                      <tr>
                        <td height="29"><div class="style1" id="tab2text" align="center">Latest Designs </div></td>
                      </tr>
                  </table></td>
                </tr>
              </table></td>
              <td width="5"> </td>
              <td bgcolor="#CCCCCC" onmouseover="rollOverTab(3)" id="tab3table" onmouseout="rollOutTab(3)" onclick="clickTab(3)" width="150"><table bgcolor="#FFFFFF" cellspacing="0" border="0" cellpadding="1" width="100%">
                <tr>
                  <td><table bgcolor="#CCCCCC" cellspacing="0" background="/source/tabbg1.png" border="0" height="29" cellpadding="5" width="100%">
                      <tr>
                        <td height="29"><div class="style1" id="tab3text" align="center">Latest Designs </div></td>
                      </tr>
                  </table></td>
                </tr>
              </table></td>
              <td width="300"> </td>
            </tr>
          </table>

Reaper

I believe you may need to change this:

onmouseout=”rollOutTab(3)”

to this:

onmouseout=”javascript:rollOutTab(3)”

Not positive, but give it a try.

I believe you may need to change this:

onmouseout=”rollOutTab(3)”

to this:

onmouseout=”javascript:rollOutTab(3)”

Not positive, but give it a try.

nope, the other javascript commands worked, and it was definately calling the code, i checked with an alert()

And i sorted it anyway, the “for” command was messing it up somehow