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

Discussion in 'Javascript' started by Eschew Obsfucation, Nov 6, 2003.

  1. 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 6, 2003
    #1
    1. Advertising

  2. 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--
    Eschew Obsfucation, Nov 7, 2003
    #2
    1. Advertising

  3. 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.
    Thomas 'PointedEars' Lahn, Nov 13, 2003
    #3
  4. 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
    Thomas 'PointedEars' Lahn, Nov 13, 2003
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Carl Gilbert
    Replies:
    0
    Views:
    910
    Carl Gilbert
    Jul 20, 2005
  2. Replies:
    0
    Views:
    524
  3. =?Utf-8?B?TWF0dCBDb2xlZ3JvdmU=?=

    Mouseover/Mouseout for Gridview cells

    =?Utf-8?B?TWF0dCBDb2xlZ3JvdmU=?=, Mar 11, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    11,089
    =?Utf-8?B?TWF0dCBDb2xlZ3JvdmU=?=
    Mar 12, 2006
  4. Joel Finkel

    Cells[].Text or Cells[].Controls[0]

    Joel Finkel, Sep 1, 2003, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    306
    Joel Finkel
    Sep 1, 2003
  5. Replies:
    4
    Views:
    190
    Tom Cole
    Jun 2, 2008
Loading...

Share This Page