Onmouseover zentral definieren?

[Christian S.]

Hi,

<td class="css-siehe-stylesheet" onmouseover="this.style.backgroundColor='#ededed'" onmouseout="this.style.backgroundColor='#fefefe'">inhalt</td>

Du könntest der Tabelle eine ID oder Css Klasse geben. Dann holst du dir die Tabelle mit

var table = document.getElementById("mytable");

Dann loopst du durch alle Zellen:

for (var i = 0; i < table.rows.length; i++)
{
  var row = table.rows[i];
  for (var j = 0; j < row.cells.length; j++)
  {
     var cell = row.cells[j];
     // Hier Event Handler an die Zelle hängen

cell.addEventListener("mouseover", function()
     {
        this.style.backgroundColor = "#ededed";
     }, false);

// selbes für mousout
     // hier noch für den IE (attachEvent). ==> Siehe event handling, z.b. bei quirksmode.org.
   }
}

Dann kann man noch ein paar sachen beachten, z.B. die Schleifenbedingung rausholen, um performance zu sparen (.length also nicht immer abfragen).

Und im Unload Event die EventHandler wieder wegnehmen (um Memory Leaks zu vermeiden).

Oder du machst etwas unschön (wie ich finde). und ersetzt einfach deinen Code durch "this.className = 'css-klasse';"

und setzt die Farben dann in der css-klasse.

Bläht halt nur den HTML Code so voll, und man sollte ja schön JS von HTML trennen, IMO.

Gruß
Christian