Ergebnis 1 bis 4 von 4
  1. #1
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    Hintergrundfarbe von Tabellenzellen ändern per Mouseover

    Oft gestellte Frage, aber immer ein und die selbe Antwort...
    Wie ändert man die Hintergrundfarbe einer Tabellenzelle per Mouseover.

    Nichts leichter als das.
    Es gibt wie immer mehrere Möglichkeiten.

    1. Man schreibt den Farbwechsel der Zelle direkt an Ort und Stelle. Wobei man hier mit CSS arbeiten kann, aber auch ohne.

    Ohne CSS (es wird auf das normale HTML-Attribut zugegriffen):
    Code:
    <table width="100" height="30">
    <td bgcolor="cccccc" onmouseover="this.bgColor='ff0000'" onmouseout="this.bgColor='cccccc'">&nbsp;</td>
    </table>

    Mit CSS (es wird auf die CSS-Eigenschaft zugegriffen):
    Code:
    <table width="100" height="30">
    <td bgcolor="cccccc" onmouseover="this.style.backgroundColor='ff0000'" onmouseout="this.style.backgroundColor='cccccc'">&nbsp;</td>
    </table>


    2. Kann man auch dies mit einer Funktion lösen, um sich ein wenig weniger Schreibarbeit zu verschaffen. Auch hier besteht die Möglichkeit mit CSS auf die Zelle Einfluss zu nehmen und ohne CSS das Ganze zu realisieren.

    Ohne CSS:
    Code:
    <html>
    <head>
    <script language=javascript>
    function farbWechsel(typ,farbe)
    {
    	typ.bgColor=farbe;
    }
    </script>
    </head>
    
    <body>
    <table width="100" height="30">
    <td bgcolor="cccccc" onmouseover="farbWechsel(this,'ff0000')" onmouseout="farbWechsel(this,'cccccc')">&nbsp;</td>
    </table>
    </body>
    </html>

    Mit CSS:
    Code:
    <html>
    <head>
    <script language=javascript>
    function farbWechsel(typ,farbe)
    {
    	typ.style.backgroundColor=farbe;
    }
    </script>
    </head>
    
    <body>
    <table width="100" height="30">
    <td bgcolor="cccccc" onmouseover="farbWechsel(this,'ff0000')" onmouseout="farbWechsel(this,'cccccc')">&nbsp;</td>
    </table>
    </body>
    </html>

    Frage geklärt? ja? super, na dann fröhliches Farbwechseln
    salü womstar

  2. #2
    j-l-n Guest

    AW: Hintergrundfarbe von Tabellenzellen ändern per Mouseover

    "Heutzutage" macht man das mit CSS (:hover):

    Code:
    td {
      background-color: #cccccc;
    }
    td:hover {
      background-color: #ff0000;
    }

  3. #3
    rico2009 Guest

    AW: Hintergrundfarbe von Tabellenzellen ändern per Mouseover

    Kann man so machen. Dir ist aber schon klar, dass das uralt HTML ist. Die Attribute bgColor und co sollten nicht mehr verwendet werden.

  4. #4
    j-l-n Guest

    AW: Hintergrundfarbe von Tabellenzellen ändern per Mouseover

    Zitat Zitat von rico2009 Beitrag anzeigen
    Kann man so machen. Dir ist aber schon klar, dass das uralt HTML ist. Die Attribute bgColor und co sollten nicht mehr verwendet werden.
    Worauf bezieht sich das jetzt?

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •