Mouseover to change Links and Cells in a table - HELP PLEASE!!!

Eschew Obsfucation · Nov 6, 2003

This is the setup:

- Table across the top of the page, holding individual TD's where in
each TD is one text link.

- Script changes the bgcolor of the cell when you mouseover the cell
itself (and this part is working like a dream).

- When you mouseover the cell (not the link itself, the cell), the
link changes color also (the part not working).

THE CODE:

td.style.backgroundColor="#666699";
td.a.active.color="#FFFFFF";

The second line there is what's messing it up. I don't know the
proper syntax to pull it off.

Anyone have any suggestions?!?!?!?!

Thanks in advance!!!

--Joseph--

Eschew Obsfucation · Nov 7, 2003

If this helps at all, this is the code in its entirety:

<script language="JavaScript1.2">

function cOn(td){
if(document.getElementById||(document.all && !(document.getElementById))){
td.style.backgroundColor="#666699";
(WHATEVER NEEDS TO GO HERE TO CHANGE THE LINK COLOR);
}
}

function cOut(td){
if(document.getElementById||(document.all && !(document.getElementById))){
td.style.backgroundColor="#CCCCCC";
(WHATEVER NEEDS TO GO HERE TO CHANGE THE LINK COLOR);
}
}

</script>

The only thing I can think of is maybe the (td) is messing it up regardless?

Thanks again if anyone can help!

--Joseph--

Thomas 'PointedEars' Lahn · Nov 13, 2003

Eschew said:
If this helps at all, this is the code in its entirety:

Alas, it is not. Please post (the URL of) the *entire* code (including
the function calls!) if using the JavaScript console does not help.

<script language="JavaScript1.2">

The `language' attribute is deprecated in HTML 4.01 and the value you used
could get you in trouble when it is parsed by UAs that read it as "support
JavaScript elements up to version 1.2". Others may not execute the code in
the first place. Use

<script type="text/javascript">

instead.

function cOn(td){
if(document.getElementById||(document.all && !(document.getElementById))){
td.style.backgroundColor="#666699";
(WHATEVER NEEDS TO GO HERE TO CHANGE THE LINK COLOR);

You do not call parts of code the whole code, do you?

}
}

function cOut(td){
if(document.getElementById||(document.all && !(document.getElementById))){
td.style.backgroundColor="#CCCCCC";
(WHATEVER NEEDS TO GO HERE TO CHANGE THE LINK COLOR);
}
}

You are doing the wrong tests in both functions. What you are interested
in is not whether the DOM of the UA supports document.getElementById and/or
document.all but whether the object referenced with `td' has the `style'
property and if it has, whether `td.style' has the `backgroundColor'
property. Although you cannot be sure, you can then assume that this object
property manipulates the respective CSS property. At least it is unlikely
that you cause script errors by assigning it a value.

if (td)
{
if (typeof td.style != "undefined"
&& typeof td.style.backgroundColor != "undefined")
{
/*
* In CSS, use the shortcut color value
* to be independent of color resolution
*/
td.style.backgroundColor = '#669';
}
...
}

The same goes for the part you snipped here. Test what you intend to
access, not something else:

<http://pointedears.de.vu/scripts/test/whatami>

HTH

PointedEars

P.S.
Do not cry in Subject headers, thanks.

Thomas 'PointedEars' Lahn · Nov 13, 2003

Thomas said:
Eschew said:

If this helps at all, this is the code in its entirety:

Click to expand...

Alas, it is not. Please post (the URL of) the *entire* code (including
the function calls!) if using the JavaScript console does not help.
[...]

function cOn(td){
if(document.getElementById||(document.all && !(document.getElementById))){
td.style.backgroundColor="#666699";
(WHATEVER NEEDS TO GO HERE TO CHANGE THE LINK COLOR);

Click to expand...

You do not call parts of code the whole code, do you?

Ah, my bad. You are *looking* for that part of your code. Well, it is
not that easy as only changing the background color, since you need to
reference the `a' element (the link) by methods of the DOM.

Therefore it is easier to define a CSS class for the mouseover effect,
like this:

<head>
...
<style type="text/css">

</style>

In the above JavaScript functions, you use:

td.className = "hover";

to highlight and

td.className = "";

to return to normal. If the latter does not work, you
need to define another class for normal-state table cells.

Does not work in NN4 since AFAIK it does not support the
`className' property, but works also without JavaScript
support in UAs compliant to CSS2 that support the `:hover'
dynamic pseudo-class for `td' elements.

You should add `... a:visited' and `... a:visited:hover'
selectors to show your visitors where they have already
been.

HTH

PointedEars

slow response in table cells <TD> to mouseover with IE6 but fine inFirefox.	4	Jun 1, 2008
interactive table - please help	1	Feb 3, 2007
mouseover, mouseout and onclick in a <TD>	1	Feb 26, 2004
syntax with multiple mouseovers in a table cell	3	Apr 12, 2004
Dynamiclly adding rows and cells in a table in .net 2.0	0	Mar 11, 2010
Tabed menu in a table	0	Nov 16, 2006
Example Script to parse web page links and extract data?	2	Sep 14, 2005
Creating a table cell and changing the color on hover.	2	Jul 3, 2008

Mouseover to change Links and Cells in a table - HELP PLEASE!!!

Eschew Obsfucation

Eschew Obsfucation

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads