468,556 Members | 2,371 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,556 developers. It's quick & easy.

How to change table cell text on <TD> mouseover

I'm not a JavaScript programmer...but I'm trying to put together a simple
menu system for a new website and need a little help.

I have the following script:

<SCRIPT language=javascript>
<!-- Hide JavaScript from Java-Impaired Browsers
function NavRollOver(oTd) {if (!oTd.contains(event.fromElement))
{oTd.bgColor="#CC0000";}}
function NavRollOut(oTd) {if (!oTd.contains(event.toElement))
{oTd.bgColor="#FFCC00";}}
// End Hiding -->
</SCRIPT>

And the following table cell definition:

<td onmouseover="NavRollOver(this)" onmouseout="NavRollOut(this)"
height="25" bgcolor="#FFCC00">
<font face="Verdana" size="2">&nbsp; </font>
<a href="../index.htm">
<font face="Verdana" color="#000000" size="2">
<span style="text-decoration: none">Home</span></font></a></font></td>

In addition to changing the cell background color, which is working
correctly now, I need to change the font color to White and font weight to
Bold on a rollover.

Can anyone help?

Thanks in advance,

Pete
Jul 23 '05 #1
2 5726
"Pete Kipe" <pk***@corpdatasys.com> wrote in message news:<34********************@giganews.com>...
I'm not a JavaScript programmer...but I'm trying to put together a simple
menu system for a new website and need a little help. .... In addition to changing the cell background color, which is working
correctly now, I need to change the font color to White and font weight to
Bold on a rollover.

Can anyone help?

Here is what I wrote up. Hope it helps.

I find it easier to work the css for the part of the page I will be
changing dynamically. It should still work with the font stuff, but
Javascript is in css. Notice how the css name font-weight change to
fontWeight. That is if the css attribute contains a -, you delete the
dash and change the next character to a uppercase character. (Change
from Cobol style variables to C style.)

Working with CSS requires you to get used to a new syntax. Once you
get the coding correct, it is easy to copy the coding via the class
tag.

Some parts of the code looked IE only. I am not familiar with events
anyway beyaond what you see in this code. I was not sure what this
code did. It didn't seem to be needed based on what you wanted to do.

You do not need all the <!-- stuff.

Robert
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>change table colors</title>

<style type="text/css">
..tableText {"text-decoration: none;
font: Verdana;
color: #000000
font-size: small"}
</style>
<SCRIPT type="text/javascript">
function NavRollOver(oTd,spanId)
{

/* Mystery to me. Looks like some IE thing.
Just as easier to code it to work for all
web broswers.
if (!oTd.contains(event.fromElement))
{
oTd.bgColor="#CC0000";
}

end of IE stuff. */

oTd.style.backgroundColor = "red";

var spanElem = document.getElementById(spanId);
spanElem.style.color = "white";
spanElem.style.fontStyle = "italic";
spanElem.style.fontWeight = "bolder";

}

function NavRollOut(oTd,spanId)
{
oTd.style.backgroundColor = "#FFCC00";

var spanElem = document.getElementById(spanId);
spanElem.style.color = "black";
spanElem.style.fontStyle = "normal";
spanElem.style.fontWeight = "normal";

}

</SCRIPT>
</head>
<body>
<p>And the following table cell definition:</p>
<table>
<tr>
<td onmouseover='NavRollOver(this,"changetext");'
onmouseout='NavRollOut(this,"changetext")'
height="25"
style="background-color: #FFCC00">
&nbsp;
<a href="../index.htm">
<span class="tableText" id="changetext">Home</span></a>&nbsp;
</td>
</tr>

</table>
</body>
Jul 23 '05 #2
"Pete Kipe" <pk***@corpdatasys.com> wrote in message news:<34********************@giganews.com>...
I'm not a JavaScript programmer...but I'm trying to put together a simple
menu system for a new website and need a little help. .... In addition to changing the cell background color, which is working
correctly now, I need to change the font color to White and font weight to
Bold on a rollover.

Can anyone help?

Thanks in advance,


And now that I think of it and I coded up all the javascript, you
should be able to do what you want with the css hover tag.

I think you can search this form for examples.

Robert
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Stan Brown | last post: by
1 post views Thread by prefersgolfing | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.