help! onClick change cell background colour?

[harlequin]

Hello!

I have a tab menu that is two rows...where the bottom row is one colour (say, a light red) and the top row is a medium red colour. i have each tab broken up into a table, so that the corners are an image, but the rest are just table cells filled with a background colour. the cell that contains the link is just plain text. say that the two top tabs text are "1" and "2", and they are both a medium red colour, and directly below that are tabs with text "3" and "4" and they are a light red colour, EXCEPT say that "4" is the active cell (meaning, it is the one that was clicked) and it's colour has now turned a dark red. what i would like is, for example, when you click on the cell that has the text "1" in it it directly swaps text with the one below it (in this case "3" and vice versa when cell "2" is clicked it would swap text with "4") BUT it also would change it's background colour and its' corner images (to match that of the new background colour)...so if you click on a cell, that one now becomes the active cell and it's colour will change to the dark red, and the one that was originally active before the click (in this case cell "4") now turns back to it's original cell colour which was the light red...so if you click on say cell "2" it would swap text with cell "4" (so that way it looks like it's coming forward) and it's background colour would change to the dark red and it's corner images would change to the ones that would match (i.e. so dark red corner images), cell "4" going back to its original background colour and corner images and then when another cell is clicked, say cell "3" then cell "2" will go back to it's original background colour (etc.) and cell "3" would change it's colour (etc.) to the dark red to be the active cell and so on.

does this make sense? lol! i hope so! i really need assistance to do this...i've been trying to do it myself to no success....if anyone could assist me, i would be greatly, GREATLY appreciative!

thank you!

kind regards,
harlequin

[harlequin]

i tried to take another crack at my code, but i keep getting the error 'style.backgroundColor is null or not an object'. here is a bit of the code i'm working with:

this is one of the table cells that holds the text:

<td id="td4" onclick="swap(4, 3);colour_swap(this.id);" width="70" height="10" rowspan="2" align="center" style="cursor: hand; background-color:#E3E2E9" class="bottomTabs">4</td>

and this is the function that does the background colour swap (though obviously it isn't working. lol!):

var state1 = '#716D93';
var state2 = '#CCCAD8';
var state3 = '#E3E2E9';

function colour_swap(navid) {
if(navid.style.backgroundColor == state3 && nav.id == 4)
{
navid.style.backgroundColor = state1;
}
}

i tried debugging by doing an alert(navid); in the function in which i do get the value of the table cell("td4") but it's not seeming to get the value of the backgroundColor when i use style.backgroundColor and i don't know why.

please...any suggestions are greatly welcomed!

thank you!

kind regards,
harlequin

[Bernard Marx]

Apologies. The description was a bit long to get my head round as I was passing through.
One thing though. Referencing elements via id won't work outside IE. There's no need to do it antway. You already have an object reference - then you give it up:

colour_swap(this.id);

Don't do that, do this

colour_swap(this);

Then

function colour_swap(navElm) {  
    if(navElm.style.backgroundColor == state3 && nav.id == 4)// <--?  
    {  
        navElm.style.backgroundColor = state1;  
    }  
}  

[harlequin]

hey bernard!

thank you so much for the reply! yeah, i know, i wrote too much, didn't i? hehe!

i'll try your suggestion. :) i appreciate it. :)

thank you!

kind regards,
harlequin

[harlequin]

i did what bernard suggested and it worked (thank you again!), and i wrote my code in a way that makes sense to me (lol - i'm no javascript whiz! ;) ) however, i am getting no errors, but the code is not completely working...i got the text to swap using a function called swap, but the code i wrote for the background colour change is not working. here it is:

function colour_swap(navElm) {

var cell = 'td1';
var cell2 = 'td2';
var cell3 = 'td3';
var cell4 = 'td4';

var state1 = '#716D93';
var state2 = '#CCCAD8';
var state3 = '#E3E2E9';

if(navElm.id == cell4 && navElm.style.backgroundColor == state3)
{
navElm.style.backgroundColor = state1;
cell.style.backgroundColor = state2;
cell2.style.backgroundColor = state3;
cell3.style.backgroundColor = state2;
}

else if((navElm.id == cell ¦¦ navElm.id == cell3) && navElm.style.backgroundColor == state2)
{
navElm.style.backgroundColor = state1;
cell4.style.backgroundColor = state3;
}
}

</script>

-----------------------------------------------

and here is my table which contains my tabs:

-----------------------------------------------

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11" height="10"><img src="cornerImages/mp_topLeftCorner.jpg"></td>
<td id="td1" onclick="swap(1, 2); colour_swap(this);" width="70" height="10" rowspan="2" align="center" style="cursor: hand; background-color:#CCCAD8" class="topTabs">1</td>
<td width="11" height="10"><img src="cornerImages/mp_topRightCorner.jpg" width="11" height="10"></td>
</tr>
<tr>
<td bgcolor="#CCCAD8" width="11">&nbsp;</td>
<td bgcolor="#CCCAD8" width="11">&nbsp;</td>
</tr>
</table>
</td>

<td width="477">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11" height="10"><img src="cornerImages/mp_topLeftCorner.jpg" width="11" height="10"></td>
<td id="td3" onclick="swap(3, 4);colour_swap(this);" width="70" height="10" rowspan="2" align="center" style="cursor: hand; background-color:#CCCAD8" class="topTabs">2</td>
<td width="11" height="10"><img src="cornerImages/mp_topRightCorner.jpg" width="11" height="10"></td>
</tr>
<tr>
<td bgcolor="#CCCAD8" width="11">&nbsp;</td>
<td bgcolor="#CCCAD8" width="11">&nbsp;</td>
</tr>
</table>
</td>

</tr>

<tr width="368">
<td width="92">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11" height="10"><img src="cornerImages/dp_topLeftCorner.jpg"></td>
<td id="td2" width="70" onclick="colour_swap(this);" height="10" rowspan="2" align="center" style="cursor: hand; background-color:#716D93" class="activeTab">3</td>
<td width="11" height="10"><img src="cornerImages/dp_topRightCorner.jpg"></td>
</tr>
<tr>
<td bgcolor="#716D93" width="11">&nbsp;</td>
<td bgcolor="#716D93" width="11">&nbsp;</td>
</tr>
</table>
</td>

<td width="477">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11" height="10"><img src="cornerImages/lp_topLeftCorner.jpg"></td>
<td id="td4" onclick="colour_swap(this);" width="70" height="10" rowspan="2" align="center" style="cursor: hand; background-color:#E3E2E9" class="bottomTabs">4</td>
<td width="11" height="10"><img src="cornerImages/lp_topRightCorner.jpg"></td>
</tr>
<tr>
<td bgcolor="#E3E2E9" width="11">&nbsp;</td>
<td bgcolor="#E3E2E9" width="11">&nbsp;</td>
</tr>
</table>
</td>

</tr>
</table>

----------------------------------------------

any suggestions? thank you very much!

kind regards,
harlequin