Dynamically changing table cell properties

[andersoni]

I am trying to develope a navigation menu that uses javascript for some mouseover events but does not use graphics. My client wants to be able to add to the menu on his own and therefore does not want to use graphics.

What I am looking to do is change the text color and background color of each cell in the navigation table as the user moves the mouse over the cell/text. Most of the mouseover examples/info I can find deals with swapping images.

Does anyone know if this can be done and if so, how (or an example)?

The particular peice I am interested in is identifying and accessing properties of each individual cell in a table.

Thanks,

Ian Anderson
andersoni@vaasinc.com:confused:

[gil davis]

In modern browsers there are mouse events on any HTML object. For example:
<table>
<tr>
<td onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''">This is an example of changing the bgColor of a table cell</td>
</tr>
</table>

[David Harrison]

Or you can use CSS, (less messy code):

[andersoni]

Thanks for the quick thoughts.

I had thought of CSS but I am not that versed in them.

Gil, has more what I am looking for. I was looking for a way to referance a cell (i.e., document.table.cell.background=) but could not find way to name a cell. However, since the cell tag can handle events that will work just as well.

Thanks.

Ian

[andersoni]

Changing the background works great, but what about the text color. Since the <font> tag is seperate, does it also handle events? I am working with it and getting nowhere.

Another thought, could I have the contents of the cell (font tag and all) added to the cell when the mouse is over the cell. In other words, onmouseover='code for cell contents'?

Ian

[David Harrison]

That's the good thing about CSS though, you don't really have to know about it. You could just put your styles in the head and forget about it. Well apart from the class="hi" in your links.

I'd tell you a js way to change the colour of links, but I don't know one I'm afraid.

[gil davis]

Originally posted by andersoni
I was looking for a way to referance a cell (i.e., document.table.cell.background=) but could not find way to name a cell.You assign an ID to each cell you intend to manipulate:<td id="r1c1" ...>Then you use document.getElementById("r1c1").style...to manipulate it. However, if you use the "this" operator in an event for the cell, you really don't need to have an ID. You only need an ID to reference the cell in a generalized script where you pass the ID to the function.Changing the background works great, but what about the text color.<td onmouseover="this.style.backgroundColor='yellow';this.style.color='blue'"
onmouseout="this.style.backgroundColor='';this.style.color='black'">This is an example of changing the fg and bgColor of a table cell</td>

[David Harrison]

Interesting side note:

In the javascript examples, you are actually using styles but because it's javascript it will work for less people.

[andersoni]

Working Great,

Thanks for all the help!

Ian