hover-effekt für <td>

[megge]

also, ich würd gern für meine Page einen netten Effekt machen: wenn man über eine tabelle, sprich über ein <td> fährt, soll sie dessen Farbe verändern, wenn man wieder weggeht, soll wieder die ursprüngliche Farbe da sein. eigentlich ganz simpel, denkt sich da der Mensch...eigentlich...

Welche Möglichkeiten gäbe es da alles (die ich kenne) ?
per style:
foo { background-color: #000000 }
td.foo:hover { background-color: #FFFFFF }
<td class=foo>blubb</td>
funzt in Mozilla, der IE streikt aber..

per js:
<td onmouseover="this.bgcolor='#FFFFFF'" onmouseout="this.bgcolor='#000000'">blubb</td>
funzt, dafür kann ich keine styles zuordnen. mach ich noch class=blubb rein, so funktioniert der mouseover effekt nicht mehr. mach ich style="" passiert dasselbe: nix.

ne andere methode kenn ich nicht..

weiss da jemand ne möglichkeit, wie ich das ganze umgehen könnte ?

mfg Megge

[dbenzhuser]

N'Obend

ne andere methode kenn ich nicht..
weiss da jemand ne möglichkeit, wie ich das ganze umgehen könnte ?

Du kannst direkt die CSS-Eigenschaften manipulieren:
http://selfhtml.teamone.de/javascript/objekte/style.htm

Das sollte helfen.

Tschö,
dbenzhuser

[Megge]

Hi nochmals

Deine Variante, dbenzhuser, funktioniert zwar, aber nur unterm SchrottIE, der Mozialla macht da nix...

Das von dir, Thomas, funktioniert sicher, nur hab ichs ned verstanden :D

[Thomas Luethi]

Hallo,

<td onmouseover="this.bgcolor='#FFFFFF'" onmouseout="this.bgcolor='#000000'">blubb</td>
funzt, dafür kann ich keine styles zuordnen.

Doch. Es gibt this.className ...

ne andere methode kenn ich nicht..

Ich schon: Mach einen Link in die Zelle und mach,
dass der Link die Zelle fuellt:
td.foo a { display:block; }

Gruesse,

Thomas

[Thomas Luethi]

Hallo,

<td onmouseover="this.bgcolor='#FFFFFF'" onmouseout="this.bgcolor='#000000'">blubb</td>
funzt, dafür kann ich keine styles zuordnen.

Doch. Es gibt this.className ...

Ich denke mal, dass Du diesen Teil nicht verstanden hast.
Sonst laut reklamieren! ;-)

Nochmal langsam zum Mitschreiben:

Statt direkt "hart" die Farben zu setzen (und damit
unflexibel zu sein bzw. auf die Vorteile eines
zentralen CSS zu verzichten) koenntest Du mit
JavaScript auch nur die Klassennamen der Zelle
aendern.

td.foo1 { color:#000000; background-color:#ffffff; }
td.foo2 { color:#ff3333; background-color:#000000; }

<td class="foo1" onmouseover="this.className='foo2'"
    onmouseout="this.className='foo1'">

Gruesse,

Thomas

[megge]

hahaha, rofl, dat geht sogar :D

danke vielmals !

[Thomas Luethi]

Hallo,

hahaha, rofl, dat geht sogar :D

Dass ich _das_ noch erleben darf:
1. Ich bringe jemandem einen JavaScript-Trick bei!
2. Die Antwort ist im besten Telepolis-Stil!!!!11 (*)

Thomas
(*) http://www.heise.de/tp/deutsch/inhalt/te/16739/1.html SCNR.