Simulation von CSS

[Ernesto]

Hallo,

mit CSS kann man Klassen definieren und mittels "hover" bei allen
Elementen der Klassen Farbänderungen z.B. beim Überfahren mit der
Maus erreichen.
Auch mit Javascript kann man durch die Eventhandler Farbänderungen
von Zeilen z.B. dadurch erreichen, daß man in dem Element-Tac einen
Eventhandler notiert:
<tr onmouseover="this.style.color='red';"
    onmouseout="this.style.color='black';"> ...</tr>
Der Nachteil ist:
Man müßte den Event-Handler in jeder gewünschten Zeile notieren,
während man über CSS das für alle Elemente einer Klasse mit einem
einzigen Befehl erreichen kann. Nun kann man versuchen, das in Java-
script zu simulieren mit:

function eventHandler1(evt)
{
 if(!evt) { evt = window.event; }
 rows[each].style.color = 'red';
 rows[each].style.backgroundColor = '#666666';
}

function eventHandler2(evt)
{
 if(!evt) { evt = window.event; }
 rows[each].style.color = 'black';
 rows[each].style.backgroundColor = 'white';
}

rows = new Array();
rows = document.getElementsByName("rowName");
for (each in rows)
{
rows[each].onmouseover = eventHandler1;
rows[each].onmouseout  = eventHandler2;
}

Das klappt nicht, da in den functions "each" nicht aktuell bekannt ist,
getestet im Browser Firefox.

Geht das überhaupt und wenn, dann einfacher???

Vielen Dank im Voraus und viele Grüße
  Ernesto

[ChrisB]

Hi,

Auch mit Javascript kann man durch die Eventhandler Farbänderungen
von Zeilen z.B. dadurch erreichen, daß man in dem Element-Tac einen
Eventhandler notiert:
<tr onmouseover="this.style.color='red';"
    onmouseout="this.style.color='black';"> ...</tr>
[...]
Geht das überhaupt und wenn, dann einfacher???

Alle modernen Browser unterstuetzen :hover auch auf Elementen wie Tabellenzeilen, also reicht hier CSS voellig aus, JavaScript braucht es nicht.

[...]
Das klappt nicht, da in den functions "each" nicht aktuell bekannt ist,
getestet im Browser Firefox.

Spar dir das each - in der Funktion hast du ueber this Zugriff auf das Element, auf welchem der Event ausgeloest wurde.

function eventHandler2(evt)
{
if(!evt) { evt = window.event; }

Und was du im Beispiel mit dem Event-Objekt willst, obwohl du es ueberhaupt nicht benutzt - weisst du das ueberhaupt selber, oder hoechstens der jenige, von dem du das ohne viel Ahnung kopiert hast?

MfG ChrisB

[JürgenB]

Hallo ChrisB,

Alle modernen Browser unterstuetzen :hover auch auf Elementen wie Tabellenzeilen, also reicht hier CSS voellig aus, JavaScript braucht es nicht.

leider sind aber noch mehr als 20% aller Surfer mit einem "unmodernen" Browser unterwegs. Wobei ich nicht verstehe, warum noch so viele das automatische Update ablehnen.

Gruß, Jürgen

[ChrisB]

Hi,

Alle modernen Browser unterstuetzen :hover auch auf Elementen wie Tabellenzeilen, also reicht hier CSS voellig aus, JavaScript braucht es nicht.

leider sind aber noch mehr als 20% aller Surfer mit einem "unmodernen" Browser unterwegs.

Die wuerden vermutlich nicht sterben, wenn ihnen die Aenderung der Hintergrundfarbe einer Tabellenzeile beim Ueberfahren vorenthalten wuerde - und wenn doch, wuerde das zumindest die Statistik in erfreuliche Richtung korrigieren.

MfG ChrisB

[Ernesto]

Hallo,

das ist ja alles schön und richtig, aber habt Ihr meine Antwort gelesen?

MfG   Ernesto

[ChrisB]

Hi,

das ist ja alles schön und richtig, aber habt Ihr meine Antwort gelesen?

Hast du schon mal was von Geduld gehoert?

Diese Nebendiskussion ueber CSS braeuchten wir uebrigens gar nicht fuehren, wenn du gleich einen vernuenftigen Titel gewaehlt und dein Problem passender beschrieben haettest - eigentlich geht es dir ja schliesslich um das dynamische hinzufuegen von Eventhandlern, und wie man dann das jeweilige Element ansprechen kann.

MfG ChrisB

[MudGuard]

Hi,

Wobei ich nicht verstehe, warum noch so viele das automatische Update ablehnen.

Es gibt gar kein automatisches Update von Windows 2000 auf Windows XP.

cu,
Andreas

[JürgenB]

Hallo MudGuard,

Es gibt gar kein automatisches Update von Windows 2000 auf Windows XP.

w2k habe ich ja ganz vergessen, das haben wir vor 3(?) Jahren aus Sicherheitsgründen eingestampft.

Gruß, Jürgen

[Ernesto]

Hallo,

ich weiß, daß CSS ausreicht, aber ich soll nun mal die Möglichkeiten
von Javascript austesten und demonstrieren.

Spar dir das each - in der Funktion hast du ueber this Zugriff auf das Element, auf welchem der Event ausgeloest wurde.

Wie sähe denn die Lösung mit "this" aus?

Und was du im Beispiel mit dem Event-Objekt willst, obwohl du es ueberhaupt nicht benutzt - weisst du das ueberhaupt selber, oder hoechstens der jenige, von dem du das ohne viel Ahnung kopiert hast?

Ich weiß, was man mit einem Event-Objekt machen kann, ich habe nur
angenommen, daß man zwingend ein Event-Objekt angeben muß, wenn man
einen Event-Handler über eine Zuweisung benutzt:

... .onmouseover = eventHandler;

Jetzt zur Lösung mit "this":

function eventHandler1()
{
  this.style.color           = "red";
  this.style.backgroundColor = "#666666";
}

document.getElementsByName("rowName").onmouseover = eventHandler1;

Soll da so gehen? Oder?

MfG   Ernesto

[ChrisB]

Hi,

Jetzt zur Lösung mit "this":
[...]
Soll da so gehen? Oder?

Probieren wir mal SELF was aus, oder fragen wir lieber dumpf?

MfG ChrisB

[JürgenB]

Hallo Ernesto,

Der Nachteil ist:
Man müßte den Event-Handler in jeder gewünschten Zeile notieren,
während man über CSS das für alle Elemente einer Klasse mit einem
einzigen Befehl erreichen kann.

du kannst die gewünschten Elemente einer Klasse zuordnen, nach dem Laden der Seite alle Elemente mit dem entsprechenden className suchen und diese dann mit dem Eventhandler ausstatten.

Nun kann man versuchen, das in Java-
script zu simulieren mit:

function eventHandler1(evt)
{
if(!evt) { evt = window.event; }
rows[each].style.color = 'red';
rows[each].style.backgroundColor = '#666666';
}

was soll "each" sein?

Gruß, Jürgen

[mike78]

Hallo Ernesto

Schau mal auf http://www.xs4all.nl/~peterned/csshover.html, ist zwar auch Javascript, erledigt aber alles mit einer Einbindung...