Onmouseover zentral definieren?

[Milbrand]

Hi,

ich habe via Javascript (glaube ich jedenfalls) einen Mouseover-Effekt eingefügt.
Ich hätte auch in CSS ein Mouseover gehabt, allerdings hieß es, das sei nicht kompatibel zu allen Browsern (css4you.de) - daher habe ich es hiermit versucht.

Sieht z.B. so aus:

<td class="css-siehe-stylesheet" onmouseover="this.style.backgroundColor='#ededed'" onmouseout="this.style.backgroundColor='#fefefe'">inhalt</td>

Da ich diese Art einer td öfter machen möchte, wäre es von Vorteil, den Effekt zentral zu definieren und immer nur einen kurzen Verweis dahin zu geben (vor allem für spätere Farbänderungen etc.).

Ist das möglich und falls ja, wie kann ich da vorgehen?

Über eine Antwort würde ich mich sehr freuen.
Vielen Dank im Voraus!

mfg
Milbrand

[Christian S.]

Hi,

<td class="css-siehe-stylesheet" onmouseover="this.style.backgroundColor='#ededed'" onmouseout="this.style.backgroundColor='#fefefe'">inhalt</td>

Du könntest der Tabelle eine ID oder Css Klasse geben. Dann holst du dir die Tabelle mit

var table = document.getElementById("mytable");

Dann loopst du durch alle Zellen:

for (var i = 0; i < table.rows.length; i++)
{
  var row = table.rows[i];
  for (var j = 0; j < row.cells.length; j++)
  {
     var cell = row.cells[j];
     // Hier Event Handler an die Zelle hängen

cell.addEventListener("mouseover", function()
     {
        this.style.backgroundColor = "#ededed";
     }, false);

// selbes für mousout
     // hier noch für den IE (attachEvent). ==> Siehe event handling, z.b. bei quirksmode.org.
   }
}

Dann kann man noch ein paar sachen beachten, z.B. die Schleifenbedingung rausholen, um performance zu sparen (.length also nicht immer abfragen).

Und im Unload Event die EventHandler wieder wegnehmen (um Memory Leaks zu vermeiden).

Oder du machst etwas unschön (wie ich finde). und ersetzt einfach deinen Code durch "this.className = 'css-klasse';"

und setzt die Farben dann in der css-klasse.

Bläht halt nur den HTML Code so voll, und man sollte ja schön JS von HTML trennen, IMO.

Gruß
Christian

[ChrisB]

Hi,

Ich hätte auch in CSS ein Mouseover gehabt, allerdings hieß es, das sei nicht kompatibel zu allen Browsern (css4you.de) - daher habe ich es hiermit versucht.

Der IE < 7 unterstuetzt :hover nur fuer Links, ja.
Aber aus Ruecksicht auf solch veraltete Browser das ganze mit JavaScript umzusetzen, wo es doch nur um einen optischen Effekt geht ...?

<td class="css-siehe-stylesheet" onmouseover="this.style.backgroundColor='#ededed'" onmouseout="this.style.backgroundColor='#fefefe'">inhalt</td>

Da ich diese Art einer td öfter machen möchte, wäre es von Vorteil, den Effekt zentral zu definieren und immer nur einen kurzen Verweis dahin zu geben (vor allem für spätere Farbänderungen etc.).

Per onload eine Funktion aufrufen, die alle TDs durchlaeuft (bspw. per getElementsByTagName), und dann die onmouseover/-out-Handlerfunktion dynamisch setzt.

{elementReferenz}.onmouseover = {funktionsreferenz};

Innerhalb der Funktion hast du dann ueber this Zugriff auf das Element.

Wenn du das dann nur fuer IE < 7 machst (dafuer bieten sich Conditional Comments oder Conditional Compilation an), und alle anderen Browser ueber CSS bedienst ... das waere doch fein.

MfG ChrisB

[Christian S.]

Hi,

Der IE < 7 unterstuetzt :hover nur fuer Links, ja.
Aber aus Ruecksicht auf solch veraltete Browser das ganze mit JavaScript umzusetzen, wo es doch nur um einen optischen Effekt geht ...?

IE 7 kann aber auch nicht alles, und ich bin mir nicht sicher ob er td:hover versteht.

Wenn du das dann nur fuer IE < 7 machst (dafuer bieten sich Conditional Comments oder Conditional Compilation an), und alle anderen Browser ueber CSS bedienst ... das waere doch fein.

Das ist m.E. auch unsinnig. Wieso sollte man sich die Arbeit machen, und Code, der ohne größere Umstände in beiden Browsern funktioniert, so umzugestalten, dass er doch wieder nur in einem läuft und für andere Browser dann eine andere Technologie zu verwenden!?
Und jetzt komm nicht mit dem Argument, dass dann 2% aller Besucher die JavaScript abgeschaltet haben, und von denen wiederum 30-40% Non-IE User sind , den Mouseover effekt nicht sehen können... pff...

Gruß!

[ChrisB]

Hi,

IE 7 kann aber auch nicht alles, und ich bin mir nicht sicher ob er td:hover versteht.

Tut er.

Wenn du das dann nur fuer IE < 7 machst (dafuer bieten sich Conditional Comments oder Conditional Compilation an), und alle anderen Browser ueber CSS bedienst ... das waere doch fein.

Das ist m.E. auch unsinnig. Wieso sollte man sich die Arbeit machen, und Code, der ohne größere Umstände in beiden Browsern funktioniert, so umzugestalten, dass er doch wieder nur in einem läuft und für andere Browser dann eine andere Technologie zu verwenden!?

Weil man den Workaround irgendwann mal ersatzlos entsorgen kann, wenn $badBrowser keine Rolle mehr spielt.

MfG ChrisB

[Der Martin]

Hallo,

Weil man den Workaround irgendwann mal ersatzlos entsorgen kann, wenn $badBrowser keine Rolle mehr spielt.

hmm, die Hoffnung, dass Firefox in absehbarer Zeit ausstirbt, habe ich mittlerweile aufgegeben.

Ciao,
 Martin

[ChrisB]

Hi,

Weil man den Workaround irgendwann mal ersatzlos entsorgen kann, wenn $badBrowser keine Rolle mehr spielt.

hmm, die Hoffnung, dass Firefox in absehbarer Zeit ausstirbt, habe ich mittlerweile aufgegeben.

Moechtest du mir jetzt weissmachen, dass der FF :hover nicht unterstuetze ... oder geht es dir allgemein um die Umstaende, die einen Browser zu einem Element von $badBrowser werden lassen? (Denn was Speicherverbrauch und Performance angeht, waere ich bzgl. $badBrowser[] = "Firefox"; natuerlich ganz bei dir ...)

Wer allerdings noch absichtlich mit einem IE 5 durch die Lande surft, darf nicht unbedingt damit rechnen, dass seine Meinung zum Thema "aktuelle Browser, Faehigkeiten & Probleme", von mir in allen moeglichen Belangen als sonderlich relevant erachtet wird ;-)

MfG ChrisB

[Der Martin]

Hallo Chris,

hmm, die Hoffnung, dass Firefox in absehbarer Zeit ausstirbt, habe ich mittlerweile aufgegeben.
Moechtest du mir jetzt weissmachen, dass der FF :hover nicht unterstuetze ...

nein, natürlich nicht. Ich stimme wohl zu, dass FF eine Musterlösung der Klasse $Browser sein mag - nur ist er IMHO nicht wirklich praxistauglich, wie so viele Musterlösungen.

oder geht es dir allgemein um die Umstaende, die einen Browser zu einem Element von $badBrowser werden lassen? (Denn was Speicherverbrauch und Performance angeht, waere ich bzgl. $badBrowser[] = "Firefox"; natuerlich ganz bei dir ...)

Genau das meine ich. Wenn ich einen Browser danach beurteile, ob er vielleicht $badBrowser sein könnte, zählt für mich in erster Linie die Usability. Deswegen wäre Firefox da mein erster Kandidat für diesen Titel.

Wer allerdings noch absichtlich mit einem IE 5 durch die Lande surft, darf nicht unbedingt damit rechnen, dass seine Meinung zum Thema "aktuelle Browser, Faehigkeiten & Probleme", von mir in allen moeglichen Belangen als sonderlich relevant erachtet wird ;-)

Damit kann ich leben, keine Sorge. Ich weiß, dass andere Leute andere Schwerpunkte setzen; mir ist einfach die problemlose Benutzbarkeit wichtiger als die Frage, ob dieser Browser alle Tricks und Kniffe der Darstellung beherrscht oder gar noch korrekt beherrscht, und ob er eine Webseite wirklich so darstellt, wie der Autor sich das gedacht hat. Wichtig ist mir, *dass* er sie irgendwie darstellt, ohne mich dabei groß zu ärgern.

Schönen Abend noch,
 Martin

[Cybaer]

Hi,

Genau das meine ich. Wenn ich einen Browser danach beurteile, ob er vielleicht $badBrowser sein könnte, zählt für mich in erster Linie die Usability. Deswegen wäre Firefox da mein erster Kandidat für diesen Titel.

Welche Usability meinst Du denn? Die Usability, die man braucht, um ein via IE verseuchtes System wieder zu reinigen, oder die Usability, die mich fragen läßt, wie man die ganzen Sachen am Safari erledigt, wofür man am Moz so geile PlugIns hatte? >;->

Gruß, Cybaer

PS: Schon klar. Aber leider kenne ich keinen Browser, der durchgehend so gut ist, daß ich eindeutig ihn bevorzugen würde ... :-/