onmouseover / onmouseout in CSS

[Ragnarök]

Hallo Zusammen,

ich habe eine Tabelle im html bei der die einzelnen <tr> bei onmouseover und onmouseout die Hintergrundfarbe wechseln.

Codeausschnitt:

<table width="100%" border="3" align="center" cellpadding="0" cellspacing="1">
  <tr onmouseover="this.bgColor='#708CA9';" onmouseout="this.bgColor='gold'" onclick="this.bgColor='blue'">
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr onmouseover="this.bgColor='#708CA9';" onmouseout="this.bgColor='gold'" onclick="this.bgColor='blue'">
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

Nun muss ich bei jedem <tr> die einzelnen Farben und Aktionen definieren.
Gibt es eine Möglichkeit dies ins CSS auszulagern?

Besten Dank

Grüsse Ragnarök

[hein]

hallo,

ja ich mache das per js und css-klassen. du legst vorher klassen (z.b. ".zeile_an" und ".zeile_aus") an, für die verscheidenen maus-zustände. und rufst dann nur noch die funktion auf, und übergibst die id bzw. "this":

function ActNorm(ID,TYPE){
    if(TYPE == 'on'){
     document.getElementById(ID).className = 'zeile_an';
    }else if(TYPE == 'off'){
     document.getElementById(ID).className = 'zeile_aus';
    }
}

der aufruf bsp.:

<tr onmouseover="ActNorm(this,'on')" onmouseout="ActNorm(this,'off')">

eventuell gibts auch einfachere methoden, in meinem orig-script werden aber noch andere js-dinge ausgeführt, deswegen auf dem weg einer js-funktion...

gruß hein

[wahsaga]

hi,

ich habe eine Tabelle im html bei der die einzelnen <tr> bei onmouseover und onmouseout die Hintergrundfarbe wechseln.
  <tr onmouseover="this.bgColor='#708CA9';" onmouseout="this.bgColor='gold'" onclick="this.bgColor='blue'">
Nun muss ich bei jedem <tr> die einzelnen Farben und Aktionen definieren.
Gibt es eine Möglichkeit dies ins CSS auszulagern?

mit der technik, die du verwendest, nein.
du kannst aber für onmouseover und -out eine eigene funktion definieren, und dann in dieser den farbwert festlegen - dann kannst du ihn bei bedarf an einer zentralen stelle ändern.

oder du machst das ganze gleich in CSS,
tr:hover { background-color:#708CA9; }
funktioniert aber nicht im shIEtbrowser ...

gruss,
wahsaga

[Thomas Luethi]

Hallo,

<tr onmouseover="this.bgColor='#708CA9';" onmouseout="this.bgColor='gold'" onclick="this.bgColor='blue'">
Nun muss ich bei jedem <tr> die einzelnen Farben und Aktionen definieren.
Gibt es eine Möglichkeit dies ins CSS auszulagern?

Ja.
Definiere die Farben in CSS und wechsle mit JavaScript nur die Klasse:
this.className

<tr class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="this.className='klicki';">

Gruesse,

Thomas

[Ragnarök]

Besten Dank für euere Antworten. Hat super geklappt.

Grüsse Ragnarök