Javascript: how to change text color on onmouseover event?

I am trying to write some Javascript that will change the color of a link when an onmouseover event occurs.

This can be done easily when the onmouseover is placed in the link (using css) but I am having trouble finding out how to do it when the onmouseover event is not placed within the link. In my case, I am trying to get a table cell to work as a link. the link text is in the cell, as is the <a href=...></a> tag. I place my onmouseover= in the <TD> tag in order to make the cell a link. It works, when clicked the link is opened, e.g.:

<TD onmouseover="this.bgcolor=red;return true;"
onclick="window.location='link';return true;">

In addition I can change the background color of the cell and the mouse cursor type. However, I want to modify the link text color, so that moving the mouse over the entire cell works just like moving it over the link itself.

How can this be done? I can suggest using <div> between the text? I don't know how. I think I need to somehow assign an object name to the text itself so that I can then manipulate the properties of the object.

Thanks for any help!

Peter

try this in css:

a.link_td {
background-color: #0000ff;
color: #ff0000;
display: block;
padding: 3px;
width: 100%;
}
a.link_td:hover {
background-color: #ff0000;
color: #0000ff;
}

with this html:

<table>
<tr>
<td width="50"><a href="link.html" class="link_td">link</a></td>
</tr>
</table>

Thanks, but that's not going to work. If cell padding is used (and it is) this will not work when the mouse is moved over any portion of the cell - just for the innermost portion, which is little different from the original situation.

I'm really looking for a way to assign a name to the text so it is treated like an object.

Thanks again,

Peter

than don't use cellpadding for the cells that contain links
using css you can set padding per-cell if necessary.

Anyway, changing the textcolor of the link from the TD can be achieved by the following:

<td onmouseover="this.childNodes[0].style.color='#ff00ff'";><a href="link.html">link</a></td>

or using a span with an id:

<td onmouseover="document.getElementById('link1').style.color='#ff0 0ff'";><a href="link.html"><span id="link1">link</span></a></td>

you could also make it all javascript-only and ditch the <a href> altogether, but I assume that is something you don't want?

Thanks, I have it done in IE (I gave the <a> tag an id and removed cell padding by nesting a table) but it does not work in Mozilla for some reason... You can see the page here:

http://128.143.50.251/jcfletcher/1

This is the code (if you view source it's lines 100 to 109):


<TABLE BORDER=0 cellpadding=0 cellspacing=0 align=left height=1 width=100%>
<TR height=30>
<TD width=1>
<img src=__images/clear.gif border=0 height=33 width=1><BR>
</TD>
<TD align=left valign=center class=sidecurrent
onMouseOver="javascript:this.style.cursor='hand';window.status= 'Consulting services';_consulting.style.color='#9BC292';return true;"
onMouseOut="javascript:window.status='Dr. John C. Fletcher - Biomedical Ethics Consulting';_consulting.style.color='#ffffff'; return true;"
onclick="javascript:window.location='?section=consulting';r eturn true;"
title="Consulting services">
<B>
<A Href=?section=consulting class=side title="Consulting services" class=normal
onmouseover="window.status='Consulting services';return true;"
onmouseout="window.status='Dr. John C. Fletcher - Biomedical Ethics Consulting';return true;" id="_consulting">
&nbsp; Consulting
</a>
</B>
</TD>
</TR>
</TABLE>

Is this just mozilla funkiness or is there a way to resolve it?

Thanks for the help,

Peter

Mozilla is just more strict about the common rules.

First of all: you should not use the javascript: protocol in event-handlers.
Secondly, when you want to target an element with an id you cannot use the shortstyle _consulting.style.color='#9BC292'; since this is referring to a property _consulting of the top-level object, which is the window object and not the document object.
IE makes id's a property of the document object (because of the backwards compatibility with the document.all object model), but I don't think Mozilla does that.
so better use: document.getElementById('_consulting').style.color ='#9BC292';

by the way: if you need to put so much in event handlers, you may want to consider using functions for these things.

Holy moly! that does it! thank you so much I am now a very happy man!

Good to know about the document.all compatibility issue, in retrospect it has been the cause of a lot of my errors recently, but previously I had no idea why.

About writing a function - well, I think it would actually be more work, since I use a single PHP function to iterate through a set of links in a .dat file and produce the HTML/Javascript... but I may do so at some point for reusability - now I think I'll go with what works fastest and easiest.

Thanks again,

Peter