Benjamin: onmouseover - Problem

Hallo!

Ich habe ein kleines Java-Script Problem mit dieser Tabelle:

[...]
  <style type="text/css">
  td { border-top:1px solid #cedded; border-bottom:1px solid #cedded; background-color:#e5edf6; }
  </style>
 </head>
 <body style="margin-left:10px; height:100%;">
 <table cellspacing="4" style="width:175px;">
   <tr>
    <td onMouseOver="this.bgColor='#ffffff'" onMouseOut="this.bgColor='#e5edf6'"> - Home</td>
   </tr>
   <tr>
    <td onMouseOver="this.bgColor='#ffffff'" onMouseOut="this.bgColor='#e5edf6'"> - News</td>
   </tr>
   <tr>
    <td onMouseOver="this.bgColor='#ffffff'" onMouseOut="this.bgColor='#e5edf6'"> - Unser Revier</td>
   </tr>
   [...]

Normalerweise sollte jetzt der Zellenhintergrund bei einen Mouseover seine Farbe wechseln. Funktioniert aber nicht...

Wenn ich jetzt aber oben im style-bereich die background-color angabe für die zelle wegnehme, funktioniert die ganze sache mit dem onmouseover, aber die zellen sind am anfang weiss, und nehmen erst nach einem onmouseover die ihnen zugedachte farbe an (-> also die farbe, die bei onmouseout angegeben ist)

Weiss jemand Rat, wie ich das hinbekomme, dass es so funktioniert wie ich möchte?
   -> Also Zelle IMMER blau (#e5edf6) und nur bei einem onmouseover weiß.

Vielen Dank und schöne Grüße!

d:-) Benny

  1. Du nimmst 2 verschiedene Angaben um die Hintergrundfarbe zu definieren. Entscheide dich.

    A) Du gibst in jeder Tabellenzelle bgColor="#e5edf6" an oder

    B) du änderst die CSS-Attribute.

    Denn mit JavaScript definierst du als normales HTML-Dingens die Farbe, während du es oben mit CSS tust. Dadurch hast du dann zwei Werte für die Farbe, eine von HTML, eine von CSS, und die von CSS überwiegt dann einfach.

  2. Hallo Benjamin,

    Normalerweise sollte jetzt der Zellenhintergrund bei einen Mouseover seine Farbe wechseln. Funktioniert aber nicht...

    du brauchst das Objekt style (->http://selfhtml.teamone.de/javascript/objekte/style.htm), mit dem kannst du die css-Eigenschaft background-color ändern (die wird in js mit backgroundColor angesprochen) -> onmouseover="this.style.backgroundColor='#000'"

    schöner wäre natürlich td:hover { background-color:...; } (evtl. noch mit Klassen) - nur ist der IE zu blöd dafür...

    Grüße aus Nürnberg
    Tobias

    --
    Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|
  3. Hi Benny,

    verwende anstelle von this.bgcolor:

    onMouseOver="this.style.backgroundColor='overFarbe"; onMouseOut="this.style.backgroundColor='outFarbe'"

    Schönen Abend
    Thorsten

  4. Hi!

    Vielen Dank! Das Problem ist dank euch gelöst!

    d:-) Benny