Solved

Javascript Not working in Mozilla + Netscape

Posted on 2004-09-08
5
290 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

749 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