# Farbe des style.backgroundcolor vergleichen



## mandumoal (12. Mai 2004)

Hallo!

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


```
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:

```
<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


----------



## Quaese (12. Mai 2004)

Hi,

JavaScript ist case-sensitive. Damit muss es backgroundColor heissen.

```
function overBG(obj) {
    if(obj.style.backgroundColor == c_normal ){
        obj.style.backgroundColor = c_over;
    }
}
```
Ciao
Quaese


----------



## mandumoal (12. Mai 2004)

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?


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

mfg mandumoal


----------



## mandumoal (12. Mai 2004)

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.


----------



## Quaese (12. Mai 2004)

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.

```
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.

```
<td onMouseOut="outBG(this)" onMouseOver="overBG(this)" id="_Home" style="cursor:Pointer; background-color: #dbd2ad;">&nbsp;</td>
```
Ciao
Quaese


----------



## mandumoal (13. Mai 2004)

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?


----------



## Sven Mintel (13. Mai 2004)

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.


----------



## mandumoal (13. Mai 2004)

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


----------



## Sven Mintel (13. Mai 2004)

Genau...

wenn du den Klassennamen eines Elementes änderst, werden die Formatangaben der neuen Klasse übernommen:
	
	
	



```
<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>
```


----------



## mandumoal (13. Mai 2004)

Danke! es funktioniert jetz mit dem Abragen des Klassennamens!


----------



## Kaliostro (16. Mai 2004)

Hallo...
Ich hoffe die Frage passt hier evtl. rein.

Ich würde gerne per style.backgroundColor in einer Tabelle die Farbe in einem Feld ändern bei mouseover, dann bei out solange lassen bis ich im nächsten Tabellenfeld per mouseover die Farbe für dieses Feld auf Farbe 2 setze, dann sollte die Farbe in Feld 1 wieder zurück auf die Standardfarbe... Oh man, ich hoffe das versteht einer 

Tabelle:
---------------
| 1 | 2 | 3 |
---------------

Normalzustand: alle Farben auf Standardfarbe 1
Über 1 drüber: Farbe ändert sich auf Farbe 2
Aus 1 raus: Farbe bleibt auf Farbe 2
Über 2 drüber: Feld1 wird geändert auf Standardfarbe, Feld 2 bekommt Farbe 2
usw.

Geht sowas per Javascript, und wenn ja, wie?
Ich bin leider keine Leuche was das angeht, und freue mich über jede Hilfe die auch ein Neuling versteht 

Dank euch,
Kaliostro


----------



## Quaese (16. Mai 2004)

Hi,

der folgende Code sollte das von Dir gewünschte erfüllen.

```
// Variable
var colOld = "";    // Alte Farbe
var objOld = null;    // Altes Objekt

// Browseridentifikation
IE = document.all && !window.opera;
DOM = document.getElementById && !IE;

function changeBGColor(strID, strCol){
    // Objekt ermitteln
    var myObj = (IE)?document.all[strID]:document.getElementById(strID);
    // Falls altes Objekt existiert
    if(objOld != null)
        objOld.style.backgroundColor = oldColor;

    // Aktuelle Farbe speichern, neue Farbe zuweisen, Objekt speichern
    oldColor = myObj.style.backgroundColor;
    myObj.style.backgroundColor = strCol;
    objOld = myObj;
}
```
Wird eine Zelle von der Maus überstrichen, so wird die Farbe gewechselt. Der
alte Zustand wird in dafür vorgesehenen Variablen gespeichert. Wird die Maus
über eine andere Zelle bewegt, so erhält diese die Highlight-Farbe und die alte
Zelle bekommt die Werte aus den Variablen zugewiesen.
Die Kommentare im Quellcode sollten weitere Fragen klären.

Zum Aufrufen könnte folgender HTML-Code dienen:

```
<table border="1">
    <tr style="height: 10px;">
        <td style="width: 10px; background-color: #FFFFFF;" id="td1" onmouseover="changeBGColor('td1', '#FFFF00')">&nbsp;</td>
        <td style="width: 10px; background-color: #FF0000;" id="td2" onmouseover="changeBGColor('td2', '#FFFF00')">&nbsp;</td>
        <td style="width: 10px; background-color: #00FF00;" id="td3" onmouseover="changeBGColor('td3', '#FFFF00')">&nbsp;</td>
        <td style="width: 10px; background-color: #0000FF;" id="td4" onmouseover="changeBGColor('td4', '#FFFF00')">&nbsp;</td>
    </tr>
</table>
```
Ciao
Quaese


----------



## Kaliostro (16. Mai 2004)

Funktioniert 
Danke Danke Danke ...

Cheers,
Kaliostro


----------

