onclick vs. onmouseout

[wilsonfedex]

Hallo,

habe folgendes vor:
Mittels php-script erstelle ich eine Tabelle, die auf eine Datenbank zugreift. Je nachdem wie Daten sind, soll die Tabellenzelle die Farbe ändern - ähnlich wie ein Sitzplan (Sitz frei, Sitz belegt, Sitz reserviert).

Das Darstellen der verschiedenen Zellenfarben stellt kein Problem dar.

Wenn man jetzt mit dem Mauszeiger über eine Zelle fährt, soll diese die Farbe wechseln (onmouseover funktioniert hier einwandfrei!) und wieder zur ursprünglichen Farbe wechseln, wenn der Mauszeiger wieder die Zelle verlässt (onmousout funktioniert hier auch super!).

Klickt man die Zelle an (onclick) soll sich auch die Zellenfarbe ändern (so wie ne Markierung). Auch das funktioniert.

Jetzt zum Problem. Wenn ich dann die "angeklickte" Zelle verlasse kommt die onmouseout-Funktion zu tragen und die Zelle erhält wieder die ursprüngliche Farbe.

Ich habe dann versucht, die onmouseout-Funktion an eine Bedingung (Farbe der Zelle) zu knüpfen, aber da hängt es anscheind.

Hier mein Code: (php-Schleife)

 echo"<td bgcolor=\"#00FF00\"
                          onclick=\"if (this.bgColor = '#0000FF')
                                        {this.bgColor = '#FF1CAE';}\"

                          onMouseover=\"if (this.bgColor != '#FF1CAE')
                                               {this.bgColor = '#0000FF';}\"

                           onMouseout=\"if (this.bgColor != '#FF1CAE')
                                               {this.bgColor = '#00FF00';
                                               this.title = 'bitte klicken um auszuwaehlen';}\"

            width=\"25\" align=\"center\">$i</td>"; 

Muss ich onclick in der Abfrage hinter onmouseout stellen?

Vielen Dank für eure Ratschläge!!

[Asipak]

if (this.bgColor = '#0000FF')

Hier vergleichst du nicht, sondern weist einen Wert zu.

[wilsonfedex]

Stimmt, mein Fehler. Statt '==' hab ich nur '=' geschrieben.

Habe das auch umgeändert, allerdings passiert jetzt bei onclick nichts mehr, was vorher noch ging.

Randbemerkung:

Da ich vorher ja eine Zuweisung hatte, die bestimmt immer TRUE ist, wurde meine if-Anweisung durchgeführt, also die Farbe der Zelle geändert.
Allerdings dürfte dann doch die onmouseout nicht mehr greifen, da die Farbe ja geändert wurde. Zuerst auf die Farbe der falschen Abfrage, und dann durch die Farbe der if-Anweisung bei onclick.

echo"<td bgcolor=\"#00FF00\" 
                          onclick=\"if (this.bgColor == '#0000FF') 
                                        {this.bgColor = '#FF1CAE';}\" 

                          onMouseover=\"if (this.bgColor != '#FF1CAE') 
                                               {this.bgColor = '#0000FF';}\" 

                           onMouseout=\"if (this.bgColor != '#FF1CAE') 
                                               {this.bgColor = '#00FF00'; 
                                               this.title = 'bitte klicken um auszuwaehlen';}\" 

            width=\"25\" align=\"center\">$i</td>"; 

D.h. die Abfrage bei onclick ist nicht TRUE, da die Farbe nicht stimmt.
Allerdings wird die Farbe bei onmouseover gesetzt und bei onmouseout wieder zurückgesetzt.

Hätte dann ja immer noch einen Fehler in der if-Abfrage bei onclick

[Asipak]

Wozu brauchst du bei onclick überhaupt eine Bedingung?

[Murdoc]

das ganze macht im grunde überhaupt keinen sinn. erklär mal was für ein verhalten du gerne möchtest, vielleicht kann man dann was basteln.

// habs gecheckt

[Asipak]

Welches "Ganze" macht keinen Sinn?

Das, was er erreichen möchtest, hat er doch bereits im Ausgangsposting beschrieben!

[Murdoc]

die bedingungen in den event's. ziemlich undurchsichtig.

ich würde es so machen:

<style type="text/css">
    td.row {
        width: 25px;
        text-align: center;
        background-color: #00FF00;
    }
    
    td.active {
        background-color: #0000FF;
    }
    
    td.selected {
        background-color: #FF1CAE;
    }
</style>

<script type="text/javascript">
    function handle_row_click(td) {
        if(td.className.match(/\bselected\b/))
            return;

        td.className = td.className.replace(/\bactive\b/, '') + " selected";
    }
    
    function handle_row_over(td) {
        if(td.className.match(/\b(selected|active)\b/))
            return;
            
        td.className += " active";
    }
    
    function handle_row_out(td) {
        if(td.className.match(/\bselected\b/))
            return;
            
        td.className = td.className.replace(/\bactive\b/);
    }
</script>

<td class="row" onclick="handle_row_click(this);" onmouseover="handle_row_over(this);" onmouseout="handle_row_out(this);"><?php print $i; ?></td>

ps: ihr seid wirklich ein freundlicher haufen hier

[wilsonfedex]

Wozu brauchst du bei onclick überhaupt eine Bedingung?

hier mein Schema:

Zelle ist grün.

Maus fährt über Zelle -> Zelle blau
Maus verlässt Zelle -> Zelle wieder grün

Mausklick auf Zelle -> Zelle wird orange und bleibt so

Mausklick darf nur ausgefährt werden, wenn Zelle blau ist ( und Zelle wird nur blau, wenn sie vorher grün war)

[Murdoc]

er will damit sagen: die zeile wird immer blau sein wenn man klickt (es sei denn sie ist schon orange), deswegen ist die bedingung nicht umbedingt sinnig.

[Asipak]

Ja, wenn man klickt, ist der Mauszeiger ohnehin über der Zelle, womit du bereits davon ausgehen kannst, dass sie blau ist. Das musst du nicht unbedingt nochmals überprüfen.

[Screeze]

Wieso willst du unbedingt javascript dafür nutzen?
Mit css wäre das unter umständen einfacher:
(quick & dirty, farben frei gewählt)

.normal {
    background-color:green;
}
.normal:hover{
    background-color:blue;
}
.selected {
    background-color:red;
}

deine td's werden standartmäßig mit der klasse normal belegt, wen man drauf klickt änderst du mit js dann die klasse auf "selected" und löscht "normal" von der zelle, schon hat sich das erledigt.

Oder hab ich da was falsch verstanden?

[Murdoc]

verlesen, sorry -> kann entfernt werden <-

[Asipak]

Unabhängig zu den anderen Vorschlägen sei noch gesagt, dass man mit ein wenig Debugging das aktuelle Problem schnell erkennt.

alert(this.bgColor);

gibt den Farbwert in lower-case zurück. Daher schlägt der Vergleich immer fehl.

[wilsonfedex]

Ja, wenn man klickt, ist der Mauszeiger ohnehin über der Zelle, womit du bereits davon ausgehen kannst, dass sie blau ist. Das musst du nicht unbedingt nochmals überprüfen.

Mein Gedanke war, dass ich damit dann abfrage, ob die Zelle noch nicht geklickt wurde (wenn sie zuvor grün war), oder ob sie geklickt wurde (weil dann ist sie ja orange), somit ich dann die markierte (orange) Zelle bei einem weiteren Klick wieder abwählen kann, diese also wieder im Grundzustand (grün) ist.

Die Abfrage, was bei einem Klick auf eine orange Zelle passiert ist nur noch nicht im Code drin.

[wilsonfedex]

Unabhängig zu den anderen Vorschlägen sei noch gesagt, dass man mit ein wenig Debugging das aktuelle Problem schnell erkennt.

alert(this.bgColor);

gibt den Farbwert in lower-case zurück. Daher schlägt der Vergleich immer fehl.

DANKE!!!! darauf hätte ich echt kommen können!!! Bin davon ausgegangen, dass ich die Farbwerte groß schreiben muss und hielt es daher auch für selbstverständlich, dass ich bei einer Abfrage dies ebenfalls so schreibe.

Hier dann der Code, der funktioniert:

echo"<td bgcolor=\"#00ff00\"

        onclick=\"if (this.bgColor == '#0000ff')
                       {this.bgColor = '#ff1cae';}
                     else if (this.bgColor == '#ff1cae')
                             {this.bgColor = '#00ff00';}\"        
       
        onMouseover=\"if (this.bgColor != '#ff1cae')
                               {this.bgColor = '#0000ff';}\"
        
         onMouseout=\"if (this.bgColor != '#ff1cae')
                               {this.bgColor = '#00ff00';
                                this.title = 'bitte klicken um auszuwaehlen';}\"

      width=\"25\" align=\"center\">$i</td>";