Hacker676: hintergrundfarbe ändern bei onmouseover

Hi Leute,
ich habe ein Problem mit einem Javascript, das Script bewirkt, das sich die Hintergrundfarbe einer Zeile von einer Tabelle änder wenn man mit der Maus drüber geht und wieder weg geht wenn man mit der Maus raus geht.
Soweit funkrioniert das auch, aber ich wollte das Script in eine Funktion packen und dann einbinden. Bis jetzt sond alle Versuche von mir gescheitert...
Ich will nämlich nicht alle Seiten ändern müssen wenn ich die Farbe mal wechsle und wenns geht auch nicht jedem TR-tag eine ID geben müssen.

Wäre cool wenn ihr da was wüsstet.

MfG
Hacker676

<table width="100" border="0">
  <tr onmouseover='this.style.backgroundColor="#E1E1FF";' onmouseout='this.style.background="none";'>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr onmouseover='this.style.backgroundColor="#E1E1FF";' onmouseout='this.style.background="none";'>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

  1. Hallo.

    Du kannst die Eventhandler dynamisch beim Laden der Seite zuweisen (<body onload="dynevhandl()" ...>).

    In der Funktion dynevhandl() weist Du dann jedem Element die Evhandler zu:

    function dynevhandl()  {
     var tabellen = document.getElementsByTagName("TABLE");
     for (var i=0; i<tabellen.length; i++)  {
      var trs = tabellen[i].getElementsByTagName("TR");
       for (var j=0; j<trs.length; j++)  {
        trs[j].onmouseover = function(e){hebhervor(this)};
        trs[j].onmouseout = function(e){endehebhervor(this)};
       }
     }
    }

    Jetzt haben alle tr Deines Dokuments die beiden Handler die die Funktionen hebhervor() und endeHebhervor() aufrufen.
    Nun fügst Du noch die beiden Funktionen hinzu und fertig:
    function hebhervor(wo)  {
     wo.style.backgroundColor="#E1E1FF";
    }
    function endehebhervor(wo)  {
     wo.style.background="none";
    }

    Viele Grüße

    Michael

    1. Hi Michael,
      vielen dank für deine Hilfe, funktioniert 1a!!!

      MfG
      Hacker676

    2. Jetzt haben alle tr Deines Dokuments die beiden Handler die die Funktionen hebhervor() und endeHebhervor() aufrufen.

      Hi nochmal,
      Sorry wenn ich nerve, geht es auch das nicht ALLE TR's angesprochen werden, nur welche denen ich vielleicht eine ID oder sowas gebe?

      MfG
      Hacker676

      1. hi,

        Jetzt haben alle tr Deines Dokuments die beiden Handler die die Funktionen hebhervor() und endeHebhervor() aufrufen.

        geht es auch das nicht ALLE TR's angesprochen werden, nur welche denen ich vielleicht eine ID oder sowas gebe?

        Eine Klasse zu nutzen, wäre dann vermutlich sinnvoller.

        Die Klasse eines HTML-Elementobjektes kannst du über http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften abfragen - und das machst du dann in der Schleife, bevor du die Eventhandler zuweist.

        Das kriegt jemand mit einem "Hacker" im Nickname jetzt aber sicher selber hin, hm?

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. hi,

          da fehlte eine sinnvollerer Linktext:

          Die Klasse eines HTML-Elementobjektes kannst du über className abfragen

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
          1. hi wahsaga,

            ich glaube ich werde javascript nie verstehn...
            hab das mal so versucht:

            function dynevhandl()  {
             var tabellen = document.getElementsByClassName("TABLE");
             for (var i=0; i<tabellen.length; i++)  {
              var trs = tabellen[i].getElementsByClassName("TR");
               for (var j=0; j<trs.length; j++)  {
                trs[j].onmouseover = function(e){hebhervor(this)};
                trs[j].onmouseout = function(e){endehebhervor(this)};
               }
             }
            }

            aber dann kommt ne fehlermeldung von wegen "das obkekt unterstützt diese methode nicht".
            da is doch jetz nix anders außer das er sich nicht auf tag sondern auf class beziehen soll.
            ich glaub ich nenne mich jetz scriptkiddie676 oder so... =)

            MfG
            hacker676

            1. Hi,

              var tabellen = document.getElementsByClassName("TABLE");
              aber dann kommt ne fehlermeldung von wegen "das obkekt unterstützt diese methode nicht".

              Hast Du denn eine Funktion namens getElementsByClassName für das document-Object definiert? Von sich aus existiert die nämlich nicht.

              da is doch jetz nix anders außer das er sich nicht auf tag sondern auf class beziehen soll.

              Jein. getElementsByTagName existiert automatisch, getElementsByClassName nicht.

              cu,
              Andreas

              --
              Warum nennt sich Andreas hier MudGuard?
              Schreinerei Waechter
              O o ostern ...
              Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
              1. hmmmm...
                und als was definieren?
                Bis jetzt hab ich nur das was in den anderen postings steht.
                ich versteh javascript einfach nicht, das ist für mich einfach nicht logisch so wie das:

                Jein. getElementsByTagName existiert automatisch, getElementsByClassName nicht.

                sorry aber ich checks net... Ô.o

                MfG
                Hacker676