Solved

Javascript Not working in Mozilla + Netscape

Posted on 2004-09-08
5
291 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 1

Author Comment

by:jon6
ID: 12004699
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
ID: 12010563
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
ID: 12016240
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
ID: 12016823
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
ID: 12027500
>> 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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

691 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