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

    Join Date
    Apr 2002
    Location
    USA
    Posts
    2
    Rep Power
    0

    onMouseOver or OnClick ? Css using a client side java command


    Ok I'm kinda 'stealing' the idea of the side menu at http://www.microsoft.com home page. The mouse over creates a box over the menu. I've never really gone to deep into css, as long as they've worked for me I've been happy. I've been trying to do the same thing as microsoft do, but I can't figure out how they do this mouse over. I've taken a bit of there code to show, as it doesn't work with me.

    <td class=flyoutLink onClick=Flyout_S2_Node1.click();><a
    id=Flyout_S2_Node1 onClick=javascript:trackInfo(this);
    href="http://www.####/###.asp" linkarea="Left Nav"
    linkid="Flyout_S2_Node1">Support</a> </td>

    Anyone help me with this, and please remember I am very much novice to intermediate regarding css, thanks in advance.
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Posts
    8
    Rep Power
    0
    You could do something very similar with a lot less code if you use the CSS2 pseudo-selector a:hover to change the background color.

    You could put a border around the link you're hovering over as well something like this

    a: link {... border: 0; background-color: transparent;}
    a:hover {... border:1px solid #000; background-color: #bebebe;}

    where ... is the rest of your link declarations like color and text-decoration, etc.

    This is something like article in A List Apart a while back:

    http://www.alistapart.com/stories/rollovers/

    A problem of course is that it requires CSS2, but the links would still show up if a UA didn't support hover. I've used this technique for rollovers, but not for a menu like this and now that I think about it the width of the border around the links will probably not be constant unless you did something to ensure it.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    USA
    Posts
    2
    Rep Power
    0
    Thanks for your help benjamin, I managed to code it yesterday afternoon, all sorted now.

IMN logo majestic logo threadwatch logo seochat tools logo