JavaScript Event Handler

[Jutta]

Hallo!

ich habe ein kleines Script geschrieben was folgendermaßen funktionieren soll:

Es gibt 3 Tabellen wenn ich über eine der Tabelle fahre ändert sich die Hintergrundfarbe, wenn ich in die Tabelle Klicke ändert sich erneut die die Hintergrundfarbe. Nur nun soll die Hintergrundfarbe auch beim mousout bestehen belieben solange der nächste klick kommt.

Wenn ich nun raus fahre ist wieder die alte Farbe da.

Ich habe hier schon alles ausprobiert aber keine hat funktioniert.

Ich habe hier mal mein Funktionierendes Script aufgelistet evtl. kann mir jemand sagen wie es richtig heißt?

gruss jutta

<script language="JavaScript">

function ChangeTxt(txt)
    {
        if(document.getElementById)
     {
           document.getElementById('lyr1').innerHTML = txt;

}
    }
   </script>

<table>
   <tr style="background: Silver;"
    onmouseover="this.style.cursor='hand' ; this.style.color='green' ; this.style.backgroundColor='#c6e4f4'"
    onmouseout="this.style.color='black' ; this.style.backgroundColor='Silver'"

onclick="ChangeTxt('text 1')
    ; this.style.color='#DCD444'">

<td>
   1111
   </td>
   </tr>
   </table>

<table>
   <tr style="background: #DCDCD6 background:;"
    onmouseover="this.style.cursor='hand' ; this.style.color='green' ; this.style.backgroundColor='#c6e4f4'"
    onmouseout="this.style.color='black' ; this.style.backgroundColor='#DCDCD6'"

onclick="ChangeTxt('text 2')
     ; this.style.color='#DCD444'">

<td>
   2222
   </td>
   </tr>
   </table>

<table>
   <tr style="background: Silver;"
    onmouseover="this.style.cursor='hand' ; this.style.color='green' ; this.style.backgroundColor='#c6e4f4'"
    onmouseout="this.style.color='black' ; this.style.backgroundColor='Silver'"

onclick="ChangeTxt('text 3')
    ; this.style.color='#DCD444'">

<td>
   3333
   </td>
   </tr>
   </table>

<div id="lyr1">
      <a href="#"> xxx </a>
   </div>

[Webblob]

Hallo Jutta,

Es gibt 3 Tabellen wenn ich über eine der Tabelle fahre ändert sich die Hintergrundfarbe, wenn ich in die Tabelle Klicke ändert sich erneut die die Hintergrundfarbe. Nur nun soll die Hintergrundfarbe auch beim mousout bestehen belieben solange der nächste klick kommt.

warum änderst du dann per mouseout die Hintergrundfarbe?

Wenn ich nun raus fahre ist wieder die alte Farbe da.

s.o.

Ich habe hier schon alles ausprobiert aber keine hat funktioniert.

Ich habe hier mal mein Funktionierendes Script aufgelistet evtl. kann mir jemand sagen wie es richtig heißt?

Du hast letztlich folgendes Problem: Um zu klicken, mußt du dich ja innerhalb der Tabelle(nzeile) befinden -> folglich tritt auch das Mouseover Event ein. Verlässt du nach dem Klick die Tabelle(nzeile), tritt das Mouseout Event ein, welches laut deinem Script die Hintergrundfarbe wieder ändert. Ergo müsstest du anstatt in jeder Tabelle(nzeile) mit mouseout direkt die Hintergrundfarbe zu ändern eine Funktion aufrufen, die prüft, ob vorher schon ein Klick auf die Tabelle(nzeile) stattgefunden hat oder nicht, und dementsprechend die Hintergrundfarbe ändert oder nicht.

Gruß Gunther

[Jutta]

Du hast letztlich folgendes Problem: Um zu klicken, mußt du dich ja innerhalb der Tabelle(nzeile) befinden -> folglich tritt auch das Mouseover Event ein. Verlässt du nach dem Klick die Tabelle(nzeile), tritt das Mouseout Event ein, welches laut deinem Script die Hintergrundfarbe wieder ändert. Ergo müsstest du anstatt in jeder Tabelle(nzeile) mit mouseout direkt die Hintergrundfarbe zu ändern eine Funktion aufrufen, die prüft, ob vorher schon ein Klick auf die Tabelle(nzeile) stattgefunden hat oder nicht, und dementsprechend die Hintergrundfarbe ändert oder nicht.

Hallo Gunther,

ok soweit bin ich nun auch wieder ich habe einen Funktionsaufruf der so aussieht

onmouseout="ChangeCol(this)"

Und das ist meine Funktion:

function ChangeCol()
    {
    this.style.backgroundColor=Silver";
    }

Nur kommt nun folgender Fehler: Objekt erwartet.

Irgendwas ist mit dieser Zeile falsch?
this.style.backgroundColor=Silver";

Gruß Jutta

[Christoph Schnauß]

hallo Jutta,

Irgendwas ist mit dieser Zeile falsch?
this.style.backgroundColor=Silver";

Abgesehen davon, daß das Quoting nicht stimmt: "Silver" ist keine Farbe. Nimm lieber #EEEEEE oder was dir am silbrigsten erscheint. Siehe http://de.selfhtml.org/css/formate/wertzuweisung.htm#farben

Grüße aus Berlin

Christoph S.

[Mathias Bigge]

Hi Christoph,

Irgendwas ist mit dieser Zeile falsch?
this.style.backgroundColor=Silver";

Abgesehen davon, daß das Quoting nicht stimmt: "Silver" ist keine Farbe. Nimm lieber #EEEEEE oder was dir am silbrigsten erscheint. Siehe http://de.selfhtml.org/css/formate/wertzuweisung.htm#farben

Ich dachte "silver" wäre eine zulässige Farbangabe. Falsch?

Viele Grüße
Mathias Bigge

[Christoph Schnauß]

hallo Mattes,

Ich dachte "silver" wäre eine zulässige Farbangabe. Falsch?

Nein, in deiner Schreibweise nicht. Du schreibst es klein ... Das Entscheidende bei Jutta dürfte das mangelhafte Quoting sein und der Einsatz von "this".

In "echtem" CSS wäre "silver" übrigens tatsächlich nicht einsetzbar, ich habs nachgelesen und durchgespielt. Also:
 body { background-color: Silver }
funktioniert nicht. Innerhalb einer Javascript-Anweisung funktioniert dagegen
  document.getElementById('ID').style.backgroundColor='silver';
durchaus; ob dem IE dabei Groß-/Kleinschreibung wurscht ist, kann ich im Moment nicht nachprüfen. Konqueror und Opera 7.51 (LINUX) mögen es nicht großgeschrieben  -  jedenfalls im Moment bei mir.

Ich meine, es ist nicht nur "Geschmackssache", ob man Namen wie "silver" oder "black" oder ähnlich verwendet  -  zu einem Teil sind sie ja zulässig. #EEEEEE ist nicht die einzige Alternative, aber es ist eine, die möglicherweise die wenigsten Komplikationen mit sich bringt.

Grüße aus Berlin

Christoph S.

[Mathias Bigge]

Hi Christoph,

Ich meine, es ist nicht nur "Geschmackssache", ob man Namen wie "silver" oder "black" oder ähnlich verwendet  -  zu einem Teil sind sie ja zulässig. #EEEEEE ist nicht die einzige Alternative, aber es ist eine, die möglicherweise die wenigsten Komplikationen mit sich bringt.

Ganz interessant, ich hatte mal das Problem, dass auf einer bestehenden Site "silver" als Hintergrundfarbe eingesetzt worden war. Damals hatte ich festgestellt, dass es kein Äquivalent zu Silver auf Basis numerischer Standardangaben gibt.

Ich hab mal eine Tabelle erstellt mit "silver" und den benachbarten Grautöntn, die sich zumindest in den mir zur Verfügung stehenden Browsern alle unterscheiden.
http://www.port-vision.de/test.htm

Nun habe ich mal in einem alten Webdesign-Buch nachgeguckt, das eine ordentliche Farbtabelle enthält, und die folgende Begründung zur Webfarbtabelle liefert:

"Von den 256 Farben, die ein Rechner darstellen kann, werden 40 vom Windows Betriebssystem belegt. Die verbleibenden 216 Farben teilten die Programmierer einfach linear auf die Grundfarben auf, da sich die Werte 00, 33, 66, 99, CC und FF leicht merken lassen." War Silver nun eine der tollen Betriebssystemfarben? *g*

Viele Grüße
Mathias Bigge

[wahsaga]

hi,

Ganz interessant, ich hatte mal das Problem, dass auf einer bestehenden Site "silver" als Hintergrundfarbe eingesetzt worden war. Damals hatte ich festgestellt, dass es kein Äquivalent zu Silver auf Basis numerischer Standardangaben gibt.

was meinst du damit - "nummerische standardangaben"?

Ich hab mal eine Tabelle erstellt mit "silver" und den benachbarten Grautöntn, die sich zumindest in den mir zur Verfügung stehenden Browsern alle unterscheiden.
http://www.port-vision.de/test.htm

silver ist da, nach screenshot und überprüfung der farbe im zeichenprogramm, ein einfaches #C0C0C0 - also durchaus auch per "CSS-konformer" notation darstellbar, würde ich meinen.

gruß,
wahsaga

[Mathias Bigge]

Hi wahsaga,

http://www.port-vision.de/test.htm
silver ist da, nach screenshot und überprüfung der farbe im zeichenprogramm, ein einfaches #C0C0C0 - also durchaus auch per "CSS-konformer" notation darstellbar, würde ich meinen.

Stimmt, das hatte ich übersehen in der herrlichen Grauskala...

Viele Grüße
Mathias Bigge

[MudGuard]

Hi,

ich hatte mal das Problem, dass auf einer bestehenden Site "silver" als Hintergrundfarbe eingesetzt worden war. Damals hatte ich festgestellt, dass es kein Äquivalent zu Silver auf Basis numerischer Standardangaben gibt.

Theorie:
CSS 2.0 verweist bei den Farbnamen auf HTML 4.0
http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-color

Dort (bzw. an der entsprechenden Stelle in HTML 4.01) ist für Silver der Wert #C0C0C0 festgelegt.
http://www.w3.org/TR/html401/types.html#type-color

cu,
Andreas

[Webblob]

Hallo Jutta,

ok soweit bin ich nun auch wieder ich habe einen Funktionsaufruf der so aussieht

onmouseout="ChangeCol(this)"

'this' bezieht sich immer auf das aktuelle Objekt (in diesem Fall also die Tebellenzeile, zu der das onmouseout gehört).

Und das ist meine Funktion:

function ChangeCol()
    {
    this.style.backgroundColor=Silver";
    }

Nur kommt nun folgender Fehler: Objekt erwartet.

Ja was ist denn jetzt das aktuelle Objekt (dessen BG-Color geändert werden soll)?
Das Script weiß hier nicht, auf welches Objekt es sich beziehen soll - daher die Fehlermeldung.

Irgendwas ist mit dieser Zeile falsch?
this.style.backgroundColor=Silver";

an sich nicht (bis auf die Anführungsstriche 'Silver';), wenn es ein eindeutiges aktuelles Objekt gibt, welches ein Attribut Background Color hat.

Da du aus jeder Tabelle(nzeile) heraus die selbe Funktion aufrufst, solltest du der Funktion einen eindeutigen Wert mitliefern (damit du in der Funktion weißt, welche Tabelle(nzeile) denn jetzt die Funktion aufgerufen hat).

Dazu kannst du bspw. den entsprechenden <tr> Tags (die mit dem Funktionsaufruf onmouseout="ChangeCol(this)" ) jeweils eine ID geben. <tr id="tab1" ...>

Der Funktionsaufruf sollte dann wie folgt aussehen: onmouseout="ChangeCol(this.id)"

Die Funktion ganz leicht verändern:
   function ChangeCol(aufrufendeTabelle)
   {
    document.getElementById(aufrufendeTabelle).style.backgroundColor='Silver';
   }

Den Rest findest du mit Hilfe von Selfhtml jetzt aber bestimmt selbst raus - Viel Erfolg!

Gruß Gunther

[Jutta]

Moin,

ich habe inzwischen mehre Hilfen erhalten und werde mal in ruhe mich ran tasten und hoffe es auch hinzubekommen.

Also wenn das so ist das ich eine ID mit übermitteln muß dann war das mein inziger Fehler aber erstmal muß ich es selbst hinbekommen.

Ansonsten frage ich hier noch einmal.

Zu der Frabe die habe ich einfach nur für Testezwecke SILVER benannt später wird es eine richtige Farbe geben z.B: #FFCCFF

Gruß Jutta

[peter]

hi

onmouseout="ChangeCol(this)"

function ChangeCol(objekt)
{
objekt.style.backgroundColor="#??????";
}

um das angeklickte nicht auf standardfarbe zu wechseln bei mouseout, kannst du deiner zeile z. B. ne ID geben und die merken.

etwa so (ungetestet):

var aktiveZeile=false;

onclick="if(aktiveZeile){document.getElementById(aktiveZeile).style.color='#STANDARDFARBE';
aktiveZeile=this.id;
ChangeTxt('text 1');
this.style.color='#AKTIVFARBE';"

und in der mouseout-funktion dann :

function ChangeCol(objekt)
{
if(objekt.id!=aktiveZeile)
{objekt.style.backgroundColor="#STANDARDFARBE";}
}

gruß
peter

[peter]

hi

geschweifte klammer nach if-bed. natürlich auch wieder schließen !

onclick="if(aktiveZeile){document.getElementById(aktiveZeile).style.color='#STANDARDFARBE';}
aktiveZeile=this.id;
ChangeTxt('text 1');
this.style.color='#AKTIVFARBE';"

gruß
peter

[Jutta]

hallo!

so ich habe es nun hinbekommen :)

eine Frage habe ich aber noch und zwar kann ich das ganze gerafel auch irgendwie auslagern in eine funktion oder muss immer alles in der <tr> zeile stehen?
   <table>
   <tr style="background: #cccccc;"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 1'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="if(aktiveZeile){document.getElementById(aktiveZeile).style.backgroundColor='#cccccc';}
    aktiveZeile=this.id;
    ChangeTxt('text 1');
    this.style.color='black';"
    id="tab1">

<td>

[peter]

hi

eine Frage habe ich aber noch und zwar kann ich das ganze gerafel auch irgendwie auslagern in eine funktion oder muss immer alles in der <tr> zeile stehen?

Nee, is viel besser, wenn du es auslagerst !

onclick="if(aktiveZeile){document.getElementById(aktiveZeile).style.backgroundColor='#cccccc';}

aktiveZeile=this.id;
    ChangeTxt('text 1');
    this.style.color='black';"
    id="tab1">

<td>

pack das doch einfach alles in deine ChangeText()-funktion rein.

dann einfach: onclick="ChangeText('Text1',this);"

wenn du die Funktion so anlegst:

function ChangeText(txt,obj)
{
...
...
...
}

kannst du innerhalb der Funktion mit txt auf deinen Text und mit obj auf dein übergebenes Objekt(>this) zugreifen.

siehe ÜBERGABEPARAMETER in SELFHTML !

gruß und viel spaß weiterhin.

peter

[peter]

hi

siehe ÜBERGABEPARAMETER in SELFHTML !

(steht in SELFHTML unter "Funktionen definieren", leider nicht sehr ausführlich)

wenn du schon dabei bist, packst du das von onmouseover am besten auch gleich in ne funktion.

vorteil ist, u.a. bei änderungen : eine funktion ändern statt alle einzelnen onmouseover.

das  "status='';" könnte auch in die Funktion ChangeCol() mit rein.
auf manipulation der statuszeile würde ich aber lieber verzichten.
wunderbar ist immer, wenn man im NS mehrere registerkarten offen hat und die verschiedenen seiten dann wild durcheinander die statuszeile ändern und laufschriften da durchjagen usw.

gruß
ptr

[Jutta]

Hi,

ich werde das erstmal ausprobieren ob das funktioniert...

Die Tabellen Zeilen kommen in meinem Fall auch aus der Datenbank ich muß die auch nur einmal anlegen.

Das Script diente nun erstmal nur als Testscript, wenn es dann so läuft wie es sein soll wird es in mein Hauptscript implementiert.

Wenn ich das ganze Geraffel auslagern kann, spart es evtl. noch  etwas Resourcen.

Gruß Jutta

[Jutta]

Hi!

ich habe das nun soweit geändert und meine Funktion schon mehr mals umgebaut und nun bleibe ich bei der Fassung siehe Code unten.

Nur ist irgendwas im Code noch falsch, das heißt der Objekt this tauscht den Text nicht aus?

Was daran genau falsch sein soll habe ich noch nicht wirklich verstanden...

Ich habe es auch schon mit Rückgabe (return) versucht aber das geht auch nicht.

----- schnipp -----

<script language="JavaScript">

var aktiveZeile=false;
   function ChangeCol(objekt)
   {
   if(objekt.id!=aktiveZeile)
    {
    objekt.style.backgroundColor="#cccccc";
    }
   }

function ChangeText(txt,obj)
   {

var txt = "if(aktiveZeile){document.getElementById(aktiveZeile).style.backgroundColor='#cccccc';}
    aktiveZeile=this.id;
    ChangeTxt('text 1');
    this.style.color='black';";

obj.id = txt;
   }

</script>

<table>
   <tr style="background: #cccccc;"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 1'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="ChangeText('txt',this);"
    id="tab1">

<td>
   1111
   </td>
   </tr>
   </table>

<table>
   <tr style="background: #cccccc"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 2'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="ChangeText('txt',this);"
    id="tab2">

<td>
   2222
   </td>
   </tr>
   </table>

<table>
   <tr style="background: #cccccc;"
    onmouseover="this.style.cursor='hand' ; this.style.backgroundColor='green' ; status='over 3'"
    onmouseout="ChangeCol(this)  ; status=''"

onclick="ChangeText('txt',this);"
    id="tab3">

<td>
   3333
   </td>
   </tr>
   </table>

<div id="lyr1">
      <a href="#"> xxx </a>
   </div>

----- schnapp -----

[Gernot Back]

Hallo Peter,

dein ungetesteter Quellcodevorschlag sieht meinem getesteten sehr ähnlich und ist noch eleganter. Müsste eigentlich so gehen. Damit Jutta sich ein Bild machen kann, gebe ich hier auch mal meinen Code zum Besten, den sie unter

http://www.overandover.de

auch in Aktion sehen kann:

var merk="";

function wahl (x) {
 if (merk!=""){
   if (document.getElementById){
   document.getElementById(merk).style.backgroundColor='#000000';
  }
 }
 if (x==merk){
  merk="";
  rein(x);
 } else {
  merk=x;
  if (document.getElementById){
   document.getElementById(merk).style.backgroundColor='#99BB00';
  }
 }
}

function rein (x) {
 if (x!=merk){
  if (document.getElementById){
   document.getElementById(x).style.backgroundColor='#668800';
  }
 }
}

function raus (x) {
 if (x!=merk){
  if (document.getElementById){
   document.getElementById(x).style.backgroundColor='#000000';
  }
 }
}

Gruß Gernot

[Jutta]

Dein Code werde ich später auch noch ausprobieren, dazu melde ich mich später noch einmal!

Gruß Jutta