Farbe des style.backgroundcolor vergleichen

M

mandumoal

Grünschnabel
Hallo!

Ich möchte in einer Funktion der ein Objekt übergeben wird die Farbe des style.backgroundcolor abfragen und dann gegebenfalls neu setzen:

Code: 
var c_normal   = '#DBD2AD';
var c_over     = '#8F8F8F';


function overBG(obj) {
if (obj.style.backgroundcolor == c_normal ) 
{obj.bgColor = c_over; }
}

Das wird so aufgerufen:
Code: 
<div ... onMouseOver="overBG(this)">...

eigentlich sollte das doch so funktionieren oder nicht? Der vergleich schlägt jedenfalls fehl obwohl 100%ig die Farbe c_normal ist.

wat'en da falsch bidde?

mfg mandumoal
 
Hi,

JavaScript ist case-sensitive. Damit muss es backgroundColor heissen.
Code: 
function overBG(obj) {
    if(obj.style.backgroundColor == c_normal ){
        obj.style.backgroundColor = c_over;
    }
}
Ciao
Quaese
 
Danke für den Hinweis, aber funktionieren will es trotzdem nicht.

es handelt sich übrigens um ein <td></td> in der das onMouseOver steht.
Soll ich nun obj.style.backgroundColor oder obj.bgColor setzen/abfragen?

Code: 
<td id="_Home" onMouseOver="overBG(this)" onMouseOut="outBG(this)"  bgcolor="#DBD2AD" width="17%" height="50" style="cursor:Pointer">

mfg mandumoal
 
Mal eine ganz andere Frage:

Wie stelle ich es denn am besten an, wenn ich einen Frame mit der Navigationsleiste (Table) habe und einen mit dem Inhalt, mittels Javascript eine Selektion zu ermöglichen, so dass das OnClick Event verwendet wird und eine Farbe bei Over, eine bei Out und eine bei selected gesetzt wird?
Dabei darf natürlich immer nur ein "Button" gedrückt sein und der gedrückte vom onMouseOver Event ausgeschlossen sein.
 
Hi,

mit der Abfrage der Farben

&nbsp;&nbsp;if(obj.style.backgroundColor == c_normal)

gibt es tatsächlich Probleme. Der IE versteht das, Opera und Netscape verwalten
die Farben jedoch im rgb-Format. Damit ist obige Abfrage hinfällig.
Warum musst Du aber überhaupt eine Abfrage haben. Entweder hast Du ein MousOver
oder ein MouseOut. Entsprechend reagierst Du.
Code: 
function overBG(obj) {
    obj.style.backgroundColor = c_over;
}
function outBG(obj) {
    obj.style.backgroundColor = c_normal;
}
Beim Zuweisen und Ändern der Hintergrundfarbe würde ich die style-Eigenschaft
bevorzugen.
Code: 
    <td onMouseOut="outBG(this)" onMouseOver="overBG(this)" id="_Home" style="cursor:Pointer; background-color: #dbd2ad;">&nbsp;</td>
Ciao
Quaese
 
Das mit dem vergleichen von Farben stinkt mir ja auch, aber ich muss doch prüfen ob die td gerade selected ist und dann kein rollover effekt machen.

Soll ich lieber Variablen setzten, die sich merken welches gerade selected ist und dann in der onMouseOver bzw onMouseOut function die Variable abfragen?

Wie macht mann denn soetwas?
 
Hallo....

anstatt die Farbe zu ändern, könntest du 2 Klassen für die Farben anlegen und beim jeweiligen Event den className ändern.

Die Klassennamen sollten überall identisch sein, so dass du sie vergleichen kannst.
 
meinst du Klassen in css?

kannst du mir gaanz kurz sagen wie das dann aussieht?

ich müsste dann praktisch nur prüfen welche Klasse gerade aktiv ist...

Danke
 
Genau...

wenn du den Klassennamen eines Elementes änderst, werden die Formatangaben der neuen Klasse übernommen:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function overBG(obj) 
{
if (obj.className== 'c_normal') 
  {
  obj.className='c_over'; 
  }
} 

//-->
</script>
<style type="text/css">
<!--
.c_normal{background-color:#DBD2AD;}
.c_over{background-color:#8F8F8F;}
.c_over,.c_normal{cursor:pointer;}
-->
</style>
</head>
<body>
<table>
 <tr>
  <td onMouseOut="outBG(this)" onMouseOver="overBG(this)" id="_Home" class="c_normal">
   blubb
  </td>
 </tr>
</table>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück