Skift Class i Javascript

Kan du ikke poste lidt html også?

Det ser ud til at document.getElementById ikke kan finde et element med id "TD_"+i.

<ole>

At skifte CSS-klasse er noget af det dårligst performende, man kan foretage sig i en browser. I et komplekst dokument kan det tage op til flere sekunder!
Skift i stedet de enkelte style-properties på elementerne ... det er langt mere effektivt.

- men mere hjælp kræver, vi kan se noget kode  ;o)

/mvh
</bole>

Smækker den halvfærdige kode ind her :)

<style>
  BODY {
    margin:0px;
    font-size: 10pt;
    font-family: Arial, 'Arial Unicode MS', 'MS Sans Serif', Verdana, Helvetica;   
    font-weight:bold;
    font-face:verdana;
  }
 
  DIV {
    background-image: url("images/ccbg.gif");
    border-bottom:1px solid black;
    height:20px;
  }
 
  .TDMenu1 {
    background-color:#3366CC;
    color:#FFFFFF;
    font-weight:bold;
    border-bottom:1px solid black;
    border-left:1px solid #3366CC;
    border-right:1px solid #3366CC;
  }
   
  .TDMenu2 {
    background-color:#3C9DFF;
    color:#FFFFFF;
    font-weight:bold;
    border-bottom:1px solid #3366CC;
    border-left:1px solid black;
    border-right:1px solid black;
    cursor:pointer;
  }
 
</style>
</HEAD>
<BODY>
<script type="text/JavaScript">
function VisOgLoad(value)
{
  //i <= antallet af hoved punkter, ikke særligt dynamisk mend et virker :)
  //Nulstiller alle div's så de ikke vises
  for(i = 0; i <= 6; i++)
  {
    document.getElementById("menu_"+i).style.display = "none";
  }
 
  document.getElementById("menu_"+value).style.display = "";
  document.getElementById("menu_0").style.display = "none";
}

function LukOgLoad(value)
{
  document.getElementById("menu_"+value).style.display = "none";
  document.getElementById("menu_0").style.display = "";
}
</script>
<table style="font-size:10pt;" cellpadding="2" cellspacing="0" border="0" width="100%">
  <tr>
    <td id="TD_1" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(1);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(1);" width="10%">Punkt 1</td>
    <td id="TD_2" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(2);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(2);" width="10%">Punkt 2</td>

    <td id="TD_3" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(3);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(3);" width="10%">Punkt 3</td>
    <td id="TD_4" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(4);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(4);" width="10%">Punkt 4</td>
    <td id="TD_5" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(5);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(5);" width="10%">Punkt 5</td>
    <td id="TD_6" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(6);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(6);" width="10%">Punkt 6</td>
    <td class="TDmenu1" width="40%">&nbsp;</td>
  </tr>
</table>

    <div id="menu_0"></div>
    <!-- Undermenuerne -->
    <div id="menu_1" onmouseover="java script:VisOgLoad(1);" style="display:none;">
      Dette er div nummer 1
    </div>
    <div id="menu_2" onmouseover="java script:VisOgLoad(2);" style="display:none;">
      Dette er div nummer 2
    </div>
    <div id="menu_3" onmouseover="java script:VisOgLoad(3);" style="display:none;">
      Dette er div nummer 3
    </div>

    <div id="menu_4" onmouseover="java script:VisOgLoad(4);" style="display:none;">
      Dette er div nummer 4
    </div>
    <div id="menu_5" onmouseover="java script:VisOgLoad(5);" style="display:none;">
      Dette er div nummer 5
    </div>
    <div id="menu_6" onmouseover="java script:VisOgLoad(6);" style="display:none;">
      Dette er div nummer 6
    </div>

Ideen er at "Punkt 1" skal beholde onover classe indtil man vælger feks "Punkt 3"

Så vidt jeg kan se har du navngivet dine divs TD_1, ... TD_6, men din forløkke løber igennem TD_0, ..., TD_6! Så den broker sig jo nok over TD_0 som ikke findes!

- men som sagt, er det en rigtig skidt måde at ændre styling på.
Endvidere må du ikke bruge JavaScript pseudo-protokollen i en event-handler ... aldrig 'java script:' i 'onmouseover' eller 'onmouseout'

Argh... jeg prøver lige at rette til :)

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/perf/dhtmlperf.asp

Læs under: "Avoid switching classes and style rules"

Og lur mig om ikke det spiller :)

olebole -> Kan godt se pointen, men det er et MEGET lille system, som bruges af et par sælgere, og det kører tilsyneladdende helt fint.

Helt fint ... jeg har selv gjort det i en snæver vending. Der kan dog være mange andre, der læser med - eller evt. finder dette spm. ved en senere søgning ... ikke mindst for deres skyld  ;o)

I det perspektiv - Kære medlæssere tag min slamkode med et gran salt, den ryger aldrig godt igennem en validator :)

Jeg lukker, når jeg har et svar :)

*ROTFLMAO*  =:D

- og svaret må komme fra jjust

Det kommer her ;)