<td onmouseover='..'> alters multiple cells

[tomvdduin]

How can I alter multiple cells (ie, change the backgroundcolor) when a mousecursor flies over them?

I have something like this:

<tr>
<td class="topleft" width="10">&nbsp;</td>
<td class="topright" width="390">&nbsp;</td>
</tr>
<tr>
<td class="left" width="10">&nbsp;</td>
<td class="right" width="390">
some information
</td>
</tr>
<tr>
<td class="bottomleft" width="10">&nbsp;</td>
<td class="bottomright" width="390">&nbsp;</td>
</tr>

This is a block generated by php, so it is repeated multiple times.

When I go over one of these cells, the background color of all of these cells have to change.

Is it possible?

Tom

 

[tomvdduin]

I know that with: onMouseOver="this.className='colored'" I can alter the background of one cell. That works perfectly. But, as you can see, I want this to work with all the cells, so if the mouse rolls over one of the cells, all get an other background color.

I hope this wil clarify my point

Tom

 

[BillyRayPreachersSon]

Assign the background colour to the table instead of the cells.

Something like this:

onMouseOver="this.parentNode.parentNode.className='colored';"

Hope this helps,
Dan

 

[tomvdduin]

Dan,

OK, thanks, but how can I get the original classes back when I roll my mouse out of the cell?

As you can see, the various cells uses it's own classes, that's because of the lines around them. So when the mouse rolls out of the area, all the original classes must be set.

 

[BillyRayPreachersSon]

Simply assign the original classes back using the onMouseOut event.

Dan

 

[tomvdduin]

Dan,

How do I know witch original classes the cells have? If I roll over one cell, it perhaps changes 6 to 9 cells, so it's a dirty method to hardcode it. Is is possible with an OnMouseOut to restore the classes specified in the tag itself, ie: <TD class="topleft">

 

[BillyRayPreachersSon]

Either I've misunderstood you, or you've misunderstood me, or both ;o)

I advised setting the class on the table to set the background colour, which would (if none of the cells had a background colour set) show through.

So therefore, you'd set the class on the table back to what it was - which you must know in advance, as it's whatever it is in your initial source.

Hope this makes sense!
Dan

 

[tomvdduin]

Dan,

I think you misunderstood me, or perhaps it's my bad english, I'm from Holland...

I have this:
<table>
<tr> <!-- 1 -->
<td class=topleft></td>
<td class=top></td>
<td class=topright></td>
</tr>
<tr>
<td class=left>
<td class=right colspan=2>
</tr>
<tr>
<td class=bottomleft></td>
<td class=bottom></td>
<td class=bottomright></td>
</tr> <!-- 2 -->
<table>

this is automatically generated with PHP. The piece between 1 and 2 is repeatedly printed.

When a mouse rolls over the above 8 cells, the background color has to change of all of them. when the mouse rolls out, the color has to be reset.

Changing the class is a possibiliby, but then every class has to be set to the original class when the mouse rolls out. The initially classes makes some lines around and in the cells.

do you understand me now?

The problem doesn't exist anymore, I've changed the PHP code to give <table class="tableclass"></table> code repeatedly, so now I have to change 1 class... This is the hard way of programming, because the tables have to look exactly the same (width, height) and that was easyer done with just the <tr></tr> repeated.

still, I find it kind of interesting if there is a solution for my problem... but it's not that urgent anymore, just to know JS better...