td:hover -> tr verändern?

[chrigu]

hallo zusammen,
ich habe folgendes problem. ich bin gerade an einem design mit css. nun möchte ich, wenn man über eine zelle fährt, dass sich die farbe der ganzen zeile verändert! wie realisiere ich das?

javascript?

<td class="day" onMouseOver="this.style.backgroundColor='#FF0000';">

nur wie sage ich jetzt, welche zeile gemeint ist? anstatt this muss ich was setzen?

oder geht das auch in css?

gruess chrigu

[Viennamade]

Hallo!

... nun möchte ich, wenn man über eine zelle fährt, dass sich die farbe der ganzen zeile verändert! wie realisiere ich das?

javascript?

Also ich habe

<tr onmouseover="fntdhi(this)" onmouseout ="fntdlo(this)"><td class="feature">
und
src.bgColor = '#FFFFFF';

und es funktioniert. In älteren Browsern aber nicht getestet.

Beste Grüße
Viennamade

[Thomas]

<td class="day" onMouseOver="this.style.backgroundColor='#FF0000';">

»»
Du könntest es z.B. so machen:
<td class="day" id="tabelle" onMouseover="funktion()">

Über die id kannst du die gewünschte Zeile ansprechen.

Und dann eine JScript-Funktion schreiben:

<script language="JScript" type="text/jscript">
<!--
function funktion()  {
  document.all.tabelle.style.backgroundColor = "#FF0000";
  }
//-->
</script>

Hab das jetztzwar nicht ausprobiert, sollte aber eigentlich funktionieren...

[Klaus B.]

<td class="day" onMouseOver="this.style.backgroundColor='#FF0000';">

<td class="day" onmouseover="this.parentNode.style.backgroundColor='#FF0000';">

und den onmouseout event nicht vergessen!

MfG
Klaus

[peterS.]

gruss chrigu,

...
nun möchte ich, wenn man über eine zelle fährt,
dass sich die farbe der ganzen zeile verändert!
wie realisiere ich das?

javascript?

<td class="day" onMouseOver="this.style.backgroundColor='#FF0000';">

vom DOM ausgehend ist "tr" der parent einer "td" -
   also: "this.parentNode.style.backgroundColor";

oder geht das auch in css?

css-freundliche browser unterstuetzen die pseudoklasse
   "hover" auch fuer die html-elemente "tr" bzw. "td" -
   bsp.: "tr:hover {...}";

was aber wiederum die frage aufwirft, warum Du fuer
   Deine js-loesung jeder tabellen-zelle einen event-handler
   mitgeben willst; events werden entsprechend der hirarchie
   von elementen im elementenbaum weitergereicht; fuer Dein
   vorhaben sollte es also genuegen, die mouse-events in der
   tabellen-zeile abzufangen; das sieht uebersichtlicher aus
   und spart zeit und code - bsp.:

<tr onmouseover="this.style.backgroundColor='#ff0000'">

anzeige -

- schau doch mal hier vorbei:
   http://www.pseliger.de/testCases/tableHighlighting.html

so long - peterS. - [e-mail]

[chrigu]

<tr align='center'>
<td class="day" onmouseover="this.parentNode.style.backgroundColor='#ff0000'">test</td>
</tr>

so ändert sich die hintergrundfarbe der zeile nicht!? jedoch mit einem simplen this anstatt this.parentNode schon..

was mache ich falsch?

[Cheatah]

Hi,

so ändert sich die hintergrundfarbe der zeile nicht!?

Dein Browser ist hoffnungsfrei veraltet. Ich tippe auf Netscape 4 oder einen aktuellen IE.

Cheatah

[peterS.]

hi Cheatah,

Dein Browser ist hoffnungsfrei veraltet. Ich tippe auf Netscape 4 oder einen aktuellen IE.

das trifft moeglicherweise den nagel auf den kopf;

so long - peterS. - [e-mail]

[chrigu]

jep, da hat cheatah recht, mit dem internet explorer funktionierts problemlos, firefox & safari streiken!
tja dann suche ich halt nache einem anderen weg!
danke trotzdem euch beiden..

gruss
chrigu

hi Cheatah,

Dein Browser ist hoffnungsfrei veraltet. Ich tippe auf Netscape 4 oder einen aktuellen IE.

das trifft moeglicherweise den nagel auf den kopf;

so long - peterS. - [e-mail]

[peterS.]

gruss

jep, da hat cheatah recht, mit dem internet explorer funktionierts problemlos, firefox & safari streiken!

aha also: "im IE funktioniert es, in den anderen nicht" ?

das sagt ueberhaupt nichts ueber die ursachen aus, die
   nun doch hoechstwahrscheinlich in Deinem quellcode zu
   lokalisieren sind, zumal ich nicht glaube, dass firefox
   streikt, denn mein alter firebird 0.7 stellt das bsp.
   aus [pref:t=76042&m=437991] problemlos dar (so auch mozilla);

by(t)e by(t)e - peterS. - [e-mail]

[peterS.]

hallo again Cheatah,

Dein Browser ist hoffnungsfrei veraltet. Ich tippe auf Netscape 4 oder einen aktuellen IE.

wobei ein aktueller IE das beispiel aus
   [pref:t=76042&m=437991]
   durchaus richtig handhabt;

so long - peterS. - [e-mail]

[peterS.]

hallo again chrigu,

ich weiss nicht, was sich sonst noch so in Deinem code
   versteckt haelt aber dieses beispiel, welches den zugriff
   ueber "parentNode" demonstrieren soll, funktioniert wunderbar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>tableHighlighting.html</title>
    <style type="text/css">
      /*
      */
    </style>
    <script type="text/javascript">
      /*
      */
    </script>
  </head>

<body>
    <table id="test01" rules="rows" cellpadding="5" border="0">
      <tbody>
        <tr>
          <td onmouseover="this.parentNode.style.backgroundColor='#ff0000'" onmouseout="this.parentNode.style.backgroundColor=''">row 01<br />col 01<br /></td>
          <td>row 01<br />col 02<br /></td>
          <td>row 01<br />col 03<br /></td>
        </tr>
        <tr>
          <td>row 02<br />col 01<br /></td>
          <td>row 02<br />col 02<br /></td>
          <td>row 02<br />col 03<br /></td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

<tr align='center'>
<td class="day" onmouseover="this.parentNode.style.backgroundColor='#ff0000'">test</td>
</tr>

so ändert sich die hintergrundfarbe der zeile nicht!?
jedoch mit einem simplen this anstatt this.parentNode schon..

nochmal "this" spricht das aktuelle element an - in diesem fall "td",
   "this.parentNode" spricht das elternelement an - hier also "tr";

was mache ich falsch?

keine ahnung -
   * wie sieht Dein quellcode sonst noch so aus ?
   * was steht denn in der klassen-definition fuer "day" ?

bis bald - peterS. - [e-mail]

[chrigu]

hallo peterS

es ist mir schon fast peinlich zu sagen an was es geliegen hat..
der grund, warum die farbe nicht wechselte war, dass die zellen durch cellspacing='0' so nahe beieinander waren, dass man die zeile gar nicht gesehen hat. ich habe jetzt die farbe für die zellen entfernt und man sieht die veränderung!
sorry und ein dickes dankeschön für deine bemühungen!

gruss
chrigu