Farbe des style.backgroundcolor vergleichen

[Kaliostro]

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]

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]

Funktioniert
Danke Danke Danke ...

Cheers,
Kaliostro