Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Mouseover to change Links and Cells in a table - HELP PLEASE!!!

Reply
Thread Tools

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

 
 
Eschew Obsfucation
Guest
Posts: n/a
 
      11-06-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--
 
Reply With Quote
 
 
 
 
Eschew Obsfucation
Guest
Posts: n/a
 
      11-07-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--


 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      11-13-2003
Eschew Obsfucation wrote:

> 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.
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      11-13-2003
Thomas 'PointedEars' Lahn wrote:

> Eschew Obsfucation wrote:
>> 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.
> [...]
>> 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?


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">
<!--
td:hover, td.hover {
background-color:#669;
color:#000;
}

td:hover a:link, td:hover a:link:hover,
td.hover a:link, td.hover a:link:hover {
background-color:inherit;
color:#f00;
}
-->
</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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
slow response in table cells <TD> to mouseover with IE6 but fine inFirefox. markszlazak@gmail.com Javascript 4 06-02-2008 04:18 PM
convert yyyymmdd text cells into date cells =?Utf-8?B?ZF9jYW1wZWxvQGhvdG1haWwuY29t?= Microsoft Certification 2 11-22-2006 04:52 PM
Mouseover/Mouseout for Gridview cells =?Utf-8?B?TWF0dCBDb2xlZ3JvdmU=?= ASP .Net 2 03-12-2006 01:00 AM
Writing to Cells in the Detailsview Insertmode makes cells uneditable. SixStringSlaya@gmail.com ASP .Net 0 02-28-2006 10:23 PM
Adding Table Cells and Images/Links (ASP.NET Controls) Dynamically Carl Gilbert ASP .Net 0 07-20-2005 12:47 AM



Advertisments