Solved

Javascript Not working in Mozilla + Netscape

Posted on 2004-09-08
5
285 Views
Last Modified: 2008-02-01
I have a html file called test.htm and a style sheet called Gr_style.css and i use javascript to display and hide rows.

This work fine in IE but not mozilla firefox or netscape.

I have attached the file code and css code whoever can get it to work in all browsers gets 430 points

Thanks



// Code for htm file //


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
      <head>
            <title></title>
            <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <link href="GR_style.css" rel="stylesheet" type="text/css">
      </head>
      <body>
            <table class="TableBody" cellSpacing="0" cellPadding="0" width="100%" border="0" ID="Table1">
                  <tr vAlign="middle">
                        <td id="td1" class="tr221" onmouseover="RollOverIt(0,1,0,0,0,0,1)" onmouseout="RollOutIt()" width="20%"></td>
                        <td id="td2" class="tr222" onmouseover="RollOverIt(0,0,1,0,0,0,1)" onmouseout="RollOutIt()" width="20%"></td>
                        <td id="td3" class="tr223" onmouseover="RollOverIt(0,0,0,1,0,0,1)" onmouseout="RollOutIt()" width="20%"></td>
                        <td id="td4" class="tr224" onmouseover="RollOverIt(0,0,0,0,1,0,1)" onmouseout="RollOutIt()" width="20%"></td>
                        <td id="td5" class="tr225" onmouseover="RollOverIt(0,0,0,0,0,1,1)" onmouseout="RollOutIt()" width="20%"></td>
                  </tr>
            </table>
            <table cellSpacing="0" cellPadding="0" width="100%" border="0" ID="Table2">
                  <tr id="A1">
                        <td class="TDHeight"></td>
                  </tr>
                  <tr id="A2">
                        <td onmouseover="RollOverIt(0,1,0,0,0,0,1)" onmouseleave="RollOutIt()"></td>
                  </tr>
                  <tr id="A3">
                        <td onmouseover="RollOverIt(0,0,1,0,0,0,1)" onmouseleave="RollOutIt()"></td>
                  </tr>
                  <tr id="A4">
                        <td onmouseover="RollOverIt(0,0,0,1,0,0,1)" onmouseleave="RollOutIt()"></td>
                  </tr>
                  <tr id="A5">
                        <td onmouseover="RollOverIt(0,0,0,0,1,0,1)" onmouseleave="RollOutIt()"></td>
                  </tr>
                  <tr id="A6">
                        <td onmouseover="RollOverIt(0,0,0,0,0,1,1)" onmouseleave="RollOutIt()"></td>
                  </tr>
            </table>
            <script language="JavaScript" type="text/JavaScript">
<!--

function RollOverIt(obj1,obj2,obj3,obj4,obj5,obj6,j)
{
      
 if(obj2 == 1)
 {
      
            document.getElementById('td1').className = 'tr221Over';
      
      document.getElementById('A1').className = 'sub1Over';
      document.getElementById('A2').className = 'sub2Over';
      
      document.getElementById('A3').className = 'sub3';
      document.getElementById('A4').className = 'sub4';
      document.getElementById('A5').className = 'sub5';
      document.getElementById('A6').className = 'sub6';
 }
 if(obj3 == 1)
 {
      
            document.getElementById('td2').className = 'tr222Over';
      document.getElementById('A3').className = 'sub3Over';
      document.getElementById('A1').className = 'sub1Over';
      document.getElementById('A4').className = 'sub4';
      document.getElementById('A5').className = 'sub5';
      document.getElementById('A6').className = 'sub6';
      document.getElementById('A2').className = 'sub2';
 }
 if(obj4 == 1)
 {
      
            document.getElementById('td3').className = 'tr223Over';
      document.getElementById('A4').className = 'sub4Over';
      document.getElementById('A1').className = 'sub1Over';
      
      document.getElementById('A2').className = 'sub2';
      document.getElementById('A3').className = 'sub3';
      
      document.getElementById('A5').className = 'sub5';
      document.getElementById('A6').className = 'sub6';
 }
 if(obj5 == 1)
 {
      
            document.getElementById('td4').className = 'tr224Over';
      document.getElementById('A5').className = 'sub5Over';
      document.getElementById('A1').className = 'sub1Over';
      
      document.getElementById('A2').className = 'sub2';
      document.getElementById('A3').className = 'sub3';
      document.getElementById('A4').className = 'sub4';
      
      document.getElementById('A6').className = 'sub6';
 }
 if(obj6 == 1)
 {
      
            document.getElementById('td5').className = 'tr225Over';
      document.getElementById('A6').className = 'sub6Over';
      document.getElementById('A1').className = 'sub1Over';
      
      document.getElementById('A2').className = 'sub2';
      document.getElementById('A3').className = 'sub3';
      document.getElementById('A4').className = 'sub4';
      document.getElementById('A5').className = 'sub5';
      
 }
 
}
function BodyLoaded()
{
      document.getElementById('A2').className = 'sub2';
      document.getElementById('A3').className = 'sub3';
      document.getElementById('A4').className = 'sub4';
      document.getElementById('A5').className = 'sub5';
      document.getElementById('A6').className = 'sub6';
      document.getElementById('A1').className = 'TDHeight';

}

function RollOutIt()
{
      
      document.getElementById('A2').className = 'sub2';
      document.getElementById('A3').className = 'sub3';
      document.getElementById('A4').className = 'sub4';
      document.getElementById('A5').className = 'sub5';
      document.getElementById('A6').className = 'sub6';
      document.getElementById('A1').className = 'TDHeight';
      document.getElementById('td1').className = 'tr221';
      document.getElementById('td2').className = 'tr222';
      document.getElementById('td3').className = 'tr223';
      document.getElementById('td4').className = 'tr224';
      document.getElementById('td5').className = 'tr225';
      
}


            </script>
      </body>
</html>



// Code for css // This is essential to get the colors working //


body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      background-color: #FFECD4;
}

body,td,th {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #333333;
}
a:link {
      color: #FB8538;
      text-decoration: none;
}
a:visited {
      text-decoration: none;
      color: #FEA762;
}
a:hover {
      text-decoration: underline;
      color: #005787;
}
a:active {
      text-decoration: none;
      color: #FC7316;
}
.contentBox {
      padding-top: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 50px;
      background-color: #ffffff;
}
.tr225
{
      border-right: #ffffff 0px solid;
      border-top: #ffffff 1px solid;
      
      border-left: #ffffff 0px solid;
      border-bottom: #ffffff 1px solid;
      height: 20px;
      background-color: #005787;
}
.tr224 {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #008493;
      
}
.tr223 {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #86112a;
      
}
.tr222 {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #767615;
      
}
.tr221 {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #fc7316;
      
}


.tr225Over {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 0px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #80ABC3;
}
.tr224Over {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #80C2C9;
}
.tr223Over {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #C38895;
}
.tr222Over {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #BBBB8A;
}
.tr221Over {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #FEB98B;
      
}
.botTable
{
      border-right: #ffffff 1px solid;
      padding-right: 2px;
      border-top: #ffffff 1px solid;
      padding-left: 15px;
      font-size: 11px;
      padding-bottom: 2px;
      border-left: #ffffff 1px solid;
      color: #ffffff;
      padding-top: 2px;
      border-bottom: #ffffff 1px solid;
      font-family: Arial, Helvetica, sans-serif;
      height: 22px;
}
.botTable2
{
      border-right: #ffffff 1px solid;
      padding-right: 2px;
      border-top: #ffffff 1px solid;
      padding-left: 15px;
      padding-bottom: 2px;
      border-left: #ffffff 0px solid;
      color: #ffffff;
      padding-top: 2px;
      border-bottom: #ffffff 1px solid;
      font-family: Arial, Helvetica, sans-serif;
      height: 22px;
}

.botTableOver2
{
      border-right: #ffffff 1px solid;
      padding-right: 2px;
      border-top: #ffffff 1px solid;
      padding-left: 15px;
      font-size: 11px;
      padding-bottom: 2px;
      border-left: #ffffff 1px solid;
      color: #008493;
      padding-top: 2px;
      border-bottom: #ffffff 1px solid;
      font-family: Arial, Helvetica, sans-serif;
      height: 22px;
}
.botTable2Over
{
      border-right: #ffffff 1px solid;
      padding-right: 2px;
      border-top: #ffffff 1px solid;
      padding-left: 15px;
      padding-bottom: 2px;
      border-left: #ffffff 0px solid;
      color: #008493;
      padding-top: 2px;
      border-bottom: #ffffff 1px solid;
      font-family: Arial, Helvetica, sans-serif;
      height: 22px;
}

.TableTD
{      height: 80px;
      background-color: #fea762;
}
.TableBody
{
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      
}
.TDColor
{
      background-color: #fb8538;
}
.TDBorderColor
{
      height: 22;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
}
.TDColorHeight
{
      height: 43px;
      background-color: #fea762;
}
.TDHeight1
{
      background-image: url(images/scroll_tests/200132035-003.jpg);
      height: 213px;

}
.TableHeight
{
      height: 80;
}
.TDHeight
{
      height: 22px;
}

.sub1
{
      height: 22px;
      background-color: #fea762;

}

.sub2
{
      height: 22px;
      background-color: #fb8538;
      display: none;
      
}

.sub3
{
      height: 22px;
      background-color: #767615;
      display: none;
}

.sub4
{
      height: 22px;
      background-color: #86112a;
      display: none;
}

.sub5
{
      height: 22px;
      background-color: #008493;
      display: none;
}

.sub6
{
      height: 22px;
      background-color: #005787;
      display: none;
}


.sub1Over
{
      height: 22px;
      background-color: #fea762;
      display: none;
}

.sub2Over
{
      background-color: #fb8538;
      display: block;
      height: 22px;
      
}

.sub3Over
{
      height: 22px;
      background-color: #767615;
      
}

.sub4Over
{
      height: 22px;
      background-color: #86112a;
      
}

.sub5Over
{
      height: 22px;
      background-color: #008493;
      
}

.sub6Over
{
      height: 22px;
      background-color: #005787;
      
}
.thistab {
      BORDER-RIGHT: white 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 10pt; Z-INDEX: 1; BACKGROUND: #ffffff; BORDER-LEFT: white 1px solid; CURSOR: hand; COLOR: white; FONT-FAMILY: garamond; TEXT-ALIGN: center
}
.tab {
      BORDER-RIGHT: white 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 10pt; Z-INDEX: 20; BACKGROUND: #091889; BORDER-LEFT: white 1px solid; CURSOR: hand; COLOR: white; FONT-FAMILY: garamond; HEIGHT: 25px; TEXT-ALIGN: center
}
.contents {
      BORDER-TOP: white 1px solid; BACKGROUND: #5a35c5; LEFT: 0px; WIDTH: 100%; COLOR: white; BORDER-BOTTOM: white 1px solid; POSITION: absolute; TOP: 125px; HEIGHT: 27px; TEXT-ALIGN: center
}
0
Comment
Question by:jon6
  • 3
  • 2
5 Comments
 
LVL 1

Author Comment

by:jon6
Comment Utility
By the way if you look at it in IE 5 or 6 you will see you can go a color and a sub color appears. you can hover over that one but when you go of it, it disapears
0
 
LVL 19

Expert Comment

by:dakyd
Comment Utility
Your css can be cleaner, but let's make sure that we can get it to do what you want first.  Give the following a shot (I took the contents of your <link>'ed stylesheet and put it in <style></style> to make it easier to test).  Hopefully that'll help, does it do what you want now?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD PUBLIC HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
     <head>
          <title></title>
          <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
          <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
          <style type="text/css">
body {
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     background-color: #FFECD4;
}

body,td,th {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #333333;
}
a:link {
     color: #FB8538;
     text-decoration: none;
}
a:visited {
     text-decoration: none;
     color: #FEA762;
}
a:hover {
     text-decoration: underline;
     color: #005787;
}
a:active {
     text-decoration: none;
     color: #FC7316;
}
.contentBox {
     padding-top: 20px;
     padding-right: 20px;
     padding-bottom: 20px;
     padding-left: 50px;
     background-color: #ffffff;
}
.tr225
{
     border-right: #ffffff 0px solid;
     border-top: #ffffff 1px solid;
     
     border-left: #ffffff 0px solid;
     border-bottom: #ffffff 1px solid;
     height: 20px;
     background-color: #005787;
}
.tr224 {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #008493;
     
}
.tr223 {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #86112a;
     
}
.tr222 {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #767615;
     
}
.tr221 {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #fc7316;
     
}


.tr225Over {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 0px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #80ABC3;
}
.tr224Over {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #80C2C9;
}
.tr223Over {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #C38895;
}
.tr222Over {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #BBBB8A;
}
.tr221Over {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #FEB98B;
     
}
.botTable
{
     border-right: #ffffff 1px solid;
     padding-right: 2px;
     border-top: #ffffff 1px solid;
     padding-left: 15px;
     font-size: 11px;
     padding-bottom: 2px;
     border-left: #ffffff 1px solid;
     color: #ffffff;
     padding-top: 2px;
     border-bottom: #ffffff 1px solid;
     font-family: Arial, Helvetica, sans-serif;
     height: 22px;
}
.botTable2
{
     border-right: #ffffff 1px solid;
     padding-right: 2px;
     border-top: #ffffff 1px solid;
     padding-left: 15px;
     padding-bottom: 2px;
     border-left: #ffffff 0px solid;
     color: #ffffff;
     padding-top: 2px;
     border-bottom: #ffffff 1px solid;
     font-family: Arial, Helvetica, sans-serif;
     height: 22px;
}

.botTableOver2
{
     border-right: #ffffff 1px solid;
     padding-right: 2px;
     border-top: #ffffff 1px solid;
     padding-left: 15px;
     font-size: 11px;
     padding-bottom: 2px;
     border-left: #ffffff 1px solid;
     color: #008493;
     padding-top: 2px;
     border-bottom: #ffffff 1px solid;
     font-family: Arial, Helvetica, sans-serif;
     height: 22px;
}
.botTable2Over
{
     border-right: #ffffff 1px solid;
     padding-right: 2px;
     border-top: #ffffff 1px solid;
     padding-left: 15px;
     padding-bottom: 2px;
     border-left: #ffffff 0px solid;
     color: #008493;
     padding-top: 2px;
     border-bottom: #ffffff 1px solid;
     font-family: Arial, Helvetica, sans-serif;
     height: 22px;
}

.TableTD
{     height: 80px;
     background-color: #fea762;
}
.TableBody
{
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     
}
.TDColor
{
     background-color: #fb8538;
}
.TDBorderColor
{
     height: 22;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
}
.TDColorHeight
{
     height: 43px;
     background-color: #fea762;
}
.TDHeight1
{
     background-image: url(images/scroll_tests/200132035-003.jpg);
     height: 213px;

}
.TableHeight
{
     height: 80px;
}
.TDHeight
{
     height: 22px;
}

.sub1
{
     height: 22px;
     background-color: #fea762;

}

.sub2
{
     height: 22px;
     background-color: #fb8538;
     display: none;
     
}

.sub3
{
     height: 22px;
     background-color: #767615;
     display: none;
}

.sub4
{
     height: 22px;
     background-color: #86112a;
     display: none;
}

.sub5
{
     height: 22px;
     background-color: #008493;
     display: none;
}

.sub6
{
     height: 22px;
     background-color: #005787;
     display: none;
}


.sub1Over
{
     height: 22px;
     background-color: #fea762;
     display: none;
}

.sub2Over
{
     background-color: #fb8538;
     display: block;
     height: 22px;
     
}

.sub3Over
{
     height: 22px;
     background-color: #767615;
     display: block;
}

.sub4Over
{
     height: 22px;
     background-color: #86112a;
     display: block;
}

.sub5Over
{
     height: 22px;
     background-color: #008493;
     display: block;
}

.sub6Over
{
     height: 22px;
     background-color: #005787;
     display: block;
}
.thistab {
     BORDER-RIGHT: white 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 10pt; Z-INDEX: 1; BACKGROUND:

#ffffff; BORDER-LEFT: white 1px solid; CURSOR: hand; COLOR: white; FONT-FAMILY: garamond;

TEXT-ALIGN: center
}
.tab {
     BORDER-RIGHT: white 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 10pt; Z-INDEX: 20; BACKGROUND:

#091889; BORDER-LEFT: white 1px solid; CURSOR: hand; COLOR: white; FONT-FAMILY: garamond; HEIGHT:

25px; TEXT-ALIGN: center
}
.contents {
     BORDER-TOP: white 1px solid; BACKGROUND: #5a35c5; LEFT: 0px; WIDTH: 100%; COLOR: white;

BORDER-BOTTOM: white 1px solid; POSITION: absolute; TOP: 125px; HEIGHT: 27px; TEXT-ALIGN: center
}
          </style>
     </head>
     <body>
          <table class="TableBody" cellSpacing="0" cellPadding="0" width="100%" border="0"

ID="Table1">
               <tr vAlign="middle">
                    <td id="td1" class="tr221" onmouseover="RollOverIt(0,1,0,0,0,0,1)"

onmouseout="RollOutIt()" width="20%"></td>
                    <td id="td2" class="tr222" onmouseover="RollOverIt(0,0,1,0,0,0,1)"

onmouseout="RollOutIt()" width="20%"></td>
                    <td id="td3" class="tr223" onmouseover="RollOverIt(0,0,0,1,0,0,1)"

onmouseout="RollOutIt()" width="20%"></td>
                    <td id="td4" class="tr224" onmouseover="RollOverIt(0,0,0,0,1,0,1)"

onmouseout="RollOutIt()" width="20%"></td>
                    <td id="td5" class="tr225" onmouseover="RollOverIt(0,0,0,0,0,1,1)"

onmouseout="RollOutIt()" width="20%"></td>
               </tr>
          </table>
          <table cellSpacing="0" cellPadding="0" width="100%" border="0" ID="Table2">
               <tr id="A1">
                    <td class="TDHeight"></td>
               </tr>
               <tr id="A2">
                    <td onmouseover="RollOverIt(0,1,0,0,0,0,1)" onmouseleave="RollOutIt()"></td>
               </tr>
               <tr id="A3">
                    <td onmouseover="RollOverIt(0,0,1,0,0,0,1)" onmouseleave="RollOutIt()"></td>
               </tr>
               <tr id="A4">
                    <td onmouseover="RollOverIt(0,0,0,1,0,0,1)" onmouseleave="RollOutIt()"></td>
               </tr>
               <tr id="A5">
                    <td onmouseover="RollOverIt(0,0,0,0,1,0,1)" onmouseleave="RollOutIt()"></td>
               </tr>
               <tr id="A6">
                    <td onmouseover="RollOverIt(0,0,0,0,0,1,1)" onmouseleave="RollOutIt()"></td>
               </tr>
          </table>
          <script language="JavaScript" type="text/JavaScript">
<!--

function RollOverIt(obj1,obj2,obj3,obj4,obj5,obj6,j)
{
     
 if(obj2 == 1)
 {
     document.getElementById('td1').className = 'tr221Over';
     
     document.getElementById('A1').className = 'sub1Over';
     document.getElementById('A2').className = 'sub2Over';
     
     document.getElementById('A3').className = 'sub3';
     document.getElementById('A4').className = 'sub4';
     document.getElementById('A5').className = 'sub5';
     document.getElementById('A6').className = 'sub6';
 }
 if(obj3 == 1)
 {

     document.getElementById('td2').className = 'tr222Over';
     document.getElementById('A3').className = 'sub3Over';
     document.getElementById('A1').className = 'sub1Over';
     document.getElementById('A4').className = 'sub4';
     document.getElementById('A5').className = 'sub5';
     document.getElementById('A6').className = 'sub6';
     document.getElementById('A2').className = 'sub2';
 }
 if(obj4 == 1)
 {
     
     document.getElementById('td3').className = 'tr223Over';
     document.getElementById('A4').className = 'sub4Over';
     document.getElementById('A1').className = 'sub1Over';
     
     document.getElementById('A2').className = 'sub2';
     document.getElementById('A3').className = 'sub3';
     
     document.getElementById('A5').className = 'sub5';
     document.getElementById('A6').className = 'sub6';
 }
 if(obj5 == 1)
 {
     
     document.getElementById('td4').className = 'tr224Over';
     document.getElementById('A5').className = 'sub5Over';
     document.getElementById('A1').className = 'sub1Over';
     
     document.getElementById('A2').className = 'sub2';
     document.getElementById('A3').className = 'sub3';
     document.getElementById('A4').className = 'sub4';
     
     document.getElementById('A6').className = 'sub6';
 }
 if(obj6 == 1)
 {
     
     document.getElementById('td5').className = 'tr225Over';
     document.getElementById('A6').className = 'sub6Over';
     document.getElementById('A1').className = 'sub1Over';
     
     document.getElementById('A2').className = 'sub2';
     document.getElementById('A3').className = 'sub3';
     document.getElementById('A4').className = 'sub4';
     document.getElementById('A5').className = 'sub5';
     
 }
 
}
function BodyLoaded()
{
     document.getElementById('A2').className = 'sub2';
     document.getElementById('A3').className = 'sub3';
     document.getElementById('A4').className = 'sub4';
     document.getElementById('A5').className = 'sub5';
     document.getElementById('A6').className = 'sub6';
     document.getElementById('A1').className = 'TDHeight';

}

function RollOutIt()
{
     
     document.getElementById('A2').className = 'sub2';
     document.getElementById('A3').className = 'sub3';
     document.getElementById('A4').className = 'sub4';
     document.getElementById('A5').className = 'sub5';
     document.getElementById('A6').className = 'sub6';
     document.getElementById('A1').className = 'TDHeight';
     document.getElementById('td1').className = 'tr221';
     document.getElementById('td2').className = 'tr222';
     document.getElementById('td3').className = 'tr223';
     document.getElementById('td4').className = 'tr224';
     document.getElementById('td5').className = 'tr225';
}
          </script>
     </body>
</html>
0
 
LVL 1

Author Comment

by:jon6
Comment Utility
I have moved away from that idea, however i used some code from dynamic crive which should work in all browsers, but it does not work in mozilla or netscape.

If you still want to try for the points you could have a look at that instead

Thanks
0
 
LVL 19

Expert Comment

by:dakyd
Comment Utility
Sure, I could look at the code for you.  I have no idea which code you're referring to, though, so could you post it here?  If that's too big, then post a link.  Let me know and I'll try to help you out.
0
 
LVL 19

Accepted Solution

by:
dakyd earned 430 total points
Comment Utility
>> This is the code, it works fine, i think there is a ie 4 problem dont know if you could fix that, but the main problem is that i cant get a mouse over on the submenus to work as it is a div tag. I have put a mouse over on a hyper link which fires an event but dont know how i could make the whole row turn a different color instead of setting the whole submenu a different color

Sorry didn't respond, didn't check email till now.  That said, I'm not sure I follow what you want - you want each of the sub-menus to do something when the mouse hovers over them?  When you say "whole row turn a different color", do you mean that you want a row within the submenu to turn a different color, or do you want the row of menu tabs to turn a different color?  Let me know what you mean and I'll get back to you.

By the way, if anyone else is interested, I put up a copy of the code that jon6 is working with here:
http://www.freewebs.com/dakyd/ee/dropdown/dropdown.htm
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now