#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Posts
    7
    Rep Power
    0

    Question How to access hyperlink hover attributes using Javascript ?


    I would like to 'onMouseOver' a table cell, and invert the background color with the color of the hyperlink. The problem is that I cannot find out how to change the displayed color of the hovered hyperlink using IE5 object model. The hyperlink is of class "menulink" and id "techdept1". I would like to dynamically change the color attribute of the "techdept1" element upon hovering the hyperlink.

    Using the code below, the background color of the table cell turns white onMouseOver. However, the color of the hyperlink changes to #FF0000 (as defined in the style sheet), when in reality I want it to change to #66CCFF.

    My question is how to change the defined hover color in the Javascript instead of the style sheet?

    I am thinking it can be done using the style object of the "techdept1" element.


    -----begin style sheet code-----
    a.menulink:link,a.menulink:visited,a.menulink:active {
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
    }
    a.menulink:hover {
    color:#FF0000;
    text-decoration:none;
    font-weight:bold;
    }
    -----end style sheet code-----


    ----begin html code-----

    <script type="text/javascript" language="JavaScript">
    function invertmenu(elmnt) {
    //the line below does NOT work
    document.all(elmnt).style.color="#66CCFF";
    //the line below does work
    document.all(elmnt).style.background="#FFFFFF";
    }
    function revertmenu(elmnt) {
    //the line below does NOT work
    document.all(elmnt).style.color="#FFFFFF";
    //the line below does work
    document.all(elmnt).style.background="#66CCFF";
    }
    </script>

    <table id="techdept">
    <tr><td id="techdept1" onmouseover="invertmenu('techdept1')" onmouseout="revertmenu('techdept1')"><a href="/t40/default.asp" class="menulink">T-40</a></td></tr>
    <tr><td id="techdept2" onmouseover="invertmenu('techdept2')" onmouseout="revertmenu('techdept2')"><a href="/t50/default.asp" class="menulink">T-50</a></td></tr>
    </table>

    -----end html code-----


    Your help is appreciated!

    - Tim Clark
  2. #2
  3. No Profile Picture
    Seņor Member
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2000
    Posts
    1,157
    Rep Power
    37
    I believe it's: onMouseover="Java&#83;cript:document.all(elmnt).style='background: #FFFFFF'"
    Last edited by pieux; May 30th, 2001 at 04:42 PM.
    Michael
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Posts
    7
    Rep Power
    0
    The changing of the background color works fine .. I just need to find how to change the color of the hovered link to be different than as it is defined in the style sheet.

    - tim
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Location
    Dublin
    Posts
    413
    Rep Power
    14
    I could be way off here (no time to test!!), but have you tried setting document.all[elementName].links[0].style.color=whatever;
  8. #5
  9. No Profile Picture
    Seņor Member
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2000
    Posts
    1,157
    Rep Power
    37
    onMouseover="JavaScript:document.all(elmnt).style='background: #FFFFFF'; document.all(elmnt2).style='color: #FFAACC'"
    Michael
  10. #6
  11. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    No time to test either, but it looks like a cascade problem. You're explicitly setting the .style properties on the table cell, but the hover styles set on the link element (<a>) are overriding it. Styles set directly on an element generally are more heavily weighted than styles cascaded from 'above'. Try this:

    <script type="text/javascript" language="JavaScript">

    function invertmenu(elmnt) {
    elmnt.style.background="#FFFFFF";
    document.all[elmnt.id+'link'].style.color="#66CCFF";
    }

    function revertmenu(elmnt) {
    elmnt.style.background ="#66CCFF";
    document.all[elmnt.id+'link'].style.color="#FFFFFF";
    }

    </script>

    <table id="techdept">
    <tr><td id="techdept1" onmouseover="invertmenu(this)"
    onmouseout="revertmenu(this)"><a id="techdept1link" href="/t40/default.asp"
    class="menulink">T-40</a></td></tr>
    <tr><td id="techdept2" onmouseover="invertmenu(this)"
    onmouseout="revertmenu(this)"><a id="techdept2link" href="/t50/default.asp"
    class="menulink">T-50</a></td></tr>
    </table>

    Although .all is an array (collection), JScript syntax supports referencing it with parentheses, although square brackets is more conventional.

    I'm a little confused - in one place, you said the background color change (of the cell) was working, and in your commenting you said otherwise....
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Posts
    7
    Rep Power
    0
    Thanks adios .. using a unique ID on the <A> tag solved the problem .. however, using "this" in the call to the Javascript function did not work (but thats not a big deal for this application) ..

    thanks again!

    - tim

IMN logo majestic logo spyfu logo threadwatch logo seochat tools logo