syntax with multiple mouseovers in a table cell

[Priti]

<td align="center" bgcolor="#6699cc" onMouseOver="white4.bgColor='#ffffff'"
onMouseOver="this.bgColor='#993300'" onMouseOut="this.bgColor='#6699cc'"
onMouseOut="white4.bgColor='#6699cc'">

I am having a problem changing the color of 2 differnt table cells when
mouseing over of 1cell. The issue is I want to change the bgcolor of my cell
that I am mouseing over as well as an adjacent cell, but not the whole row.
The script changes only one, whichever the 1st one is and does not execute
the 2nd mouseover, it is probably a syntax problem but I was wondering if
anyone had any ideas
Thanks

Priti

[mscir]

Priti wrote:

<td align="center" bgcolor="#6699cc" onMouseOver="white4.bgColor='#ffffff'"
onMouseOver="this.bgColor='#993300'" onMouseOut="this.bgColor='#6699cc'"
onMouseOut="white4.bgColor='#6699cc'">

I am having a problem changing the color of 2 differnt table cells when
mouseing over of 1cell. The issue is I want to change the bgcolor of my cell
that I am mouseing over as well as an adjacent cell, but not the whole row.
The script changes only one, whichever the 1st one is and does not execute
the 2nd mouseover, it is probably a syntax problem but I was wondering if
anyone had any ideas

Try this, works in my ie6:

function colorchange(position,cell_id0) {
var nextnum=1;
nextnum += +cell_id0.charAt(1);
var cell_id1 = cell_id0.charAt(0) + nextnum;
if (position=='in')
document.getElementById(cell_id1).style.background Color='#ffffff';
else
document.getElementById(cell_id1).style.background Color='#6699cc';
}

<table border="1" cellspacing="1" width="60%" bgColor="#6699cc">
<tr>
<td width="33%" id="a1" name="a1"
onMouseOver="this.bgColor='#993300';colorchange('i n','a1');"
onMouseOut="this.bgColor='#6699cc';colorchange('ou t','a1')">a1</td>
<td width="33%" id="a2" name="a2">a2</td>
<td width="34%" id="a3" name="a3">a3</td>
</tr>
<tr>
<td width="33%" id="b1" name="b1"
onMouseOver="this.bgColor='#993300';colorchange('i n','b1')"
onMouseOut="this.bgColor='#6699cc';colorchange('ou t','b1')">b1</td>
<td width="33%" id="b2" name="b2">b2</td>
<td width="34%" id="b3" name="b3">b3</td>
</tr>
<tr>
<td width="33%" id="c1" name="c1"
onMouseOver="this.bgColor='#993300';colorchange('i n','c1')"
onMouseOut="this.bgColor='#6699cc';colorchange('ou t','c1')">c1</td>
<td width="33%" id="c2" name="c2">c2</td>
<td width="34%" id="c3" name="c3">c3</td>
</tr>
<tr>
<td width="33%" id="d1" name="d1"
onMouseOver="this.bgColor='#993300';colorchange('i n','d1')"
onMouseOut="this.bgColor='#6699cc';colorchange('ou t','d1')">d1</td>
<td width="33%" id="d2" name="d2">d2</td>
<td width="34%" id="d3" name="d3">d3</td>
</tr>
</table>

Mike

[mscir]

mscir wrote:

Priti wrote:

I am having a problem changing the color of 2 differnt table <snip>

Try this, works in my ie6:

function colorchange(position,cell_id0) {
var nextnum=1;
nextnum += +cell_id0.charAt(1);
var cell_id1 = cell_id0.charAt(0) + nextnum;
if (position=='in')
document.getElementById(cell_id1).style.background Color='#ffffff';
else
document.getElementById(cell_id1).style.background Color='#6699cc';
}

Just send the id of the target cell to the function:

function colorchange(position,cell_id0) {
if (position=='in')
document.getElementById(cell_id0).style.background Color='#ffffff';
else
document.getElementById(cell_id0).style.background Color='#6699cc';
}

[Priti]

Thanks Mike,
Will this work for multiple calls, say a mouseover I want to change the cell
I am in and 2 others, one to the left and 1 to the right?

Priti

"mscir" <ms***@access4less.com.net.org.uk> wrote in message
news:10*************@corp.supernews.com...

mscir wrote:

Priti wrote:

I am having a problem changing the color of 2 differnt table <snip>

Try this, works in my ie6:

function colorchange(position,cell_id0) {
var nextnum=1;
nextnum += +cell_id0.charAt(1);
var cell_id1 = cell_id0.charAt(0) + nextnum;
if (position=='in')
document.getElementById(cell_id1).style.background Color='#ffffff';
else
document.getElementById(cell_id1).style.background Color='#6699cc';
}

Just send the id of the target cell to the function:

function colorchange(position,cell_id0) {
if (position=='in')
document.getElementById(cell_id0).style.background Color='#ffffff';
else
document.getElementById(cell_id0).style.background Color='#6699cc';
}

[mscir]

Priti wrote:

Will this work for multiple calls, say a mouseover I want to change the cell
I am in and 2 others, one to the left and 1 to the right?

Same principle, did you try modifying the code yourself? The 2nd table
column mouseover changes the background color of two different cells,
send the unique ID of any two cells to the function to change their bkg
colors. This works in my IE6, Netscape 7.1, Firefox 0.8. There may be a
more straightforward way to do this but I don't know what it would be.

function change2(position,id0,id1) {
var cell0=document.getElementById(id0);
var cell1=document.getElementById(id1);
if (position=='in') {
cell0.style.backgroundColor='#ffffff';
cell1.style.backgroundColor='#ffffff';
} else {
cell0.style.backgroundColor='#6699cc';
cell1.style.backgroundColor='#6699cc';
}
}

<table border="1" cellspacing="1" width="450" bgColor="#6699cc">
<tr>
<td width="90" id="a1" name="a1">a1</td>
<td width="90" id="a2" name="a2"
onMouseOver="this.bgColor='#993300';change2('in',' a1','a3');"
onMouseOut="this.bgColor='#6699cc';change2('out',' a1','a3')">a2</td>
<td width="90" id="a3" name="a3">a3</td>
<td width="90" id="a4" name="a4">a5</td>
</tr>
<tr>
<td width="90" id="b1" name="b1">b1</td>
<td width="90" id="b2" name="b2"
onMouseOver="this.bgColor='#993300';change2('in',' b1','b4')"
onMouseOut="this.bgColor='#6699cc';change2('out',' b1','b4')">b2</td>
<td width="90" id="b3" name="b3">b3</td>
<td width="90" id="b4" name="b4">b5</td>
</tr>
<tr>
<td width="90" id="c1" name="c1">c1</td>
<td width="90" id="c2" name="c2"
onMouseOver="this.bgColor='#993300';change2('in',' c1','c3')"
onMouseOut="this.bgColor='#6699cc';change2('out',' c1','c3')">c2</td>
<td width="90" id="c3" name="c3">c3</td>
<td width="90" id="c4" name="c4">c5</td>
</tr>
<tr>
<td width="90" id="d1" name="d1">d1</td>
<td width="90" id="d2" name="d2"
onMouseOver="this.bgColor='#993300';change2('in',' d1','d4')"
onMouseOut="this.bgColor='#6699cc';change2('out',' d1','d4')">d2</td>
<td width="90" id="d3" name="d3">d3</td>
<td width="90" id="d4" name="d4">d4</td>
</tr>
</table>

Mike

[Priti]

Sorry Mike,

I did not read the 2nd posting, this works great, not sure why my one
doesn't work but this will do nicely, now if I could only get rid of this
one extra pixel of white I have that a div class is creating I could go to
bed.

Thanks Much

Priti

"mscir" <ms***@access4less.com.net.org.uk> wrote in message
news:10*************@corp.supernews.com...

Priti wrote:

Will this work for multiple calls, say a mouseover I want to change the cell I am in and 2 others, one to the left and 1 to the right?

Same principle, did you try modifying the code yourself? The 2nd table
column mouseover changes the background color of two different cells,
send the unique ID of any two cells to the function to change their bkg
colors. This works in my IE6, Netscape 7.1, Firefox 0.8. There may be a
more straightforward way to do this but I don't know what it would be.

function change2(position,id0,id1) {
var cell0=document.getElementById(id0);
var cell1=document.getElementById(id1);
if (position=='in') {
cell0.style.backgroundColor='#ffffff';
cell1.style.backgroundColor='#ffffff';
} else {
cell0.style.backgroundColor='#6699cc';
cell1.style.backgroundColor='#6699cc';
}
}

<table border="1" cellspacing="1" width="450" bgColor="#6699cc">
<tr>
<td width="90" id="a1" name="a1">a1</td>
<td width="90" id="a2" name="a2"
onMouseOver="this.bgColor='#993300';change2('in',' a1','a3');"
onMouseOut="this.bgColor='#6699cc';change2('out',' a1','a3')">a2</td>
<td width="90" id="a3" name="a3">a3</td>
<td width="90" id="a4" name="a4">a5</td>
</tr>
<tr>
<td width="90" id="b1" name="b1">b1</td>
<td width="90" id="b2" name="b2"
onMouseOver="this.bgColor='#993300';change2('in',' b1','b4')"
onMouseOut="this.bgColor='#6699cc';change2('out',' b1','b4')">b2</td>
<td width="90" id="b3" name="b3">b3</td>
<td width="90" id="b4" name="b4">b5</td>
</tr>
<tr>
<td width="90" id="c1" name="c1">c1</td>
<td width="90" id="c2" name="c2"
onMouseOver="this.bgColor='#993300';change2('in',' c1','c3')"
onMouseOut="this.bgColor='#6699cc';change2('out',' c1','c3')">c2</td>
<td width="90" id="c3" name="c3">c3</td>
<td width="90" id="c4" name="c4">c5</td>
</tr>
<tr>
<td width="90" id="d1" name="d1">d1</td>
<td width="90" id="d2" name="d2"
onMouseOver="this.bgColor='#993300';change2('in',' d1','d4')"
onMouseOut="this.bgColor='#6699cc';change2('out',' d1','d4')">d2</td>
<td width="90" id="d3" name="d3">d3</td>
<td width="90" id="d4" name="d4">d4</td>
</tr>
</table>

Mike

[mscir]

Priti wrote:

<snip>...now if I could only get rid of this one extra
pixel of white I have that a div class is creating...

Post your code, including the css you're using.

[Priti]

I got it solved at 2:30 AM not happy about the amount of code its taking to
do the menu but the design has different border width's around it
everywhere and within a div tag for some reason a simple
<td bgcolor="#ffffff"><img src="images/aspacer.gif" width="1" height="1"
alt=""></td> was always 3 pixels high not one and it would not change no
matter what within the tag, my solution was to make a 3 pixel by one
background image with the upper and lower pixel being the menu color
background and the middle was white, works fine, but its extra work.
Thanks Mike

Priti
"mscir" <ms***@access4less.com.net.org.uk> wrote in message
news:10*************@corp.supernews.com...

Priti wrote:

<snip>...now if I could only get rid of this one extra
pixel of white I have that a div class is creating...

Post your code, including the css you're using.