Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,065
    Thanks
    4
    Thanked 8 Times in 8 Posts

    Netscape imitating java hover class with javascript

    I am trying to imitate the java hover class using javascript and css. What i have works perfectly in IE but it doesn't work in Netscape. I can write an individual function for each button to get it to work in Netscape but there has to be a better way to determine the individual id of each button. Here is what i use.

    var ns6=document.getElementById&&!document.all

    function LiteOn () {
    if (ns6){
    document.getElementById("button").style.backgroundColor = '#6666ff';
    }
    else {
    window.event.srcElement.className = 'on';
    }
    }
    function LiteOff () {
    if (ns6){
    document.getElementById("button").style.backgroundColor = '#0000ff';
    }
    else {
    window.event.srcElement.className = 'clsButton';
    }
    }

    at first I tried to assign the id of button to each one but that changed color on only the first button no matter which button i was hovering over. Any ideas on what i can try next?

    you can see this in action at http://www.dataconnective.net/
    Last edited by miranda; 04-03-2003 at 02:36 AM.

  • #2
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    couldnt you just use basic event handlers?

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Even simpler than basic event handlers, why not just use CSS?
    Code:
    a {
       background-color: #00f;
    }
    a:hover {
       background-color: #66f;
    }
    (the three-hex notation is for web-safe and "web-smart" colors. #00f is actually color code #0000ff. It auto-doubles.)

  • #4
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,065
    Thanks
    4
    Thanked 8 Times in 8 Posts

    because these are not hyperlinks

    they may function as links but only an anchor tag will respond to what you show these are actually buttons like so
    <input type="button" class="clsButton" onmousedown=LiteDown() value="About" onClick="WinOpen('about.asp')" width="100" onMouseOver="LiteOn()" onMouseOut="LiteOff()" id="button" name=about>

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If they serve as link in function, why not make them links?

    For your stylesheet:
    Code:
    body {
       margin-left: 10em;
    }
    div#navContainer {
       position: absolute;
       top: 110px;
       left: 0;
       width: 8.5em;
       margin: 0;
       border: 0;
       padding: 0;
    }
    div#navContainer a {
       display: block;
       float: left;
       width: 8em;
       margin: 0;
       border: 2px outset #00f;
       padding: 2px 1px 2px 1px;
       background-color: #00f;
       color: #fff;
    }
    div#navContainer a:hover {
       background-color: #66f;
       color: #fff;
    }
    div#navContainer a:active, 
    div#navContainer a:focus {
       padding: 3px 0 1px 2px;
       background-color: #00f;
       color: #fff;
    }
    For your html:
    Code:
    <body>
    ...
    <div id="navContainer">
    <a href="...">About</a>
    etc.
    </div>
    Try that out. Just use a test file first. Bonus of doing it this way: my preffered browser will honor this.

  • #6
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,065
    Thanks
    4
    Thanked 8 Times in 8 Posts
    thanks for the idea, but i know all about doing something like that. That isnt what i want here though. But thanks anyway.

  • #7
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i meant something more along the lines of this:

    <style type="text/css">
    .button {
    background-color:#fff;
    }
    .buttonover {
    background-color:#000;
    }
    </style>
    <input type="button" value="Button" class="button" onmouseover="this.className='buttonover';"
    onmouseout="this.className='button';">


    as far as your ID problem, you can only use one value, one time i believe.
    Last edited by cg9com; 04-03-2003 at 07:51 PM.

  • #8
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,065
    Thanks
    4
    Thanked 8 Times in 8 Posts

    present stylesheet looks like this

    here is the present stylesheet for use with the above javascript


    .clsButton
    {
    FONT-WEIGHT: bold;
    BORDER-COLOR: #0000ff;
    BORDER-LEFT-COLOR: #0000ff;
    BORDER-BOTTOM-COLOR: #0000ff;
    BORDER-RIGHT-COLOR: #0000ff;
    BORDER-TOP-COLOR: #0000ff;
    BACKGROUND-COLOR: #0000ff;
    WIDTH: 100px;
    COLOR: #ffffff;
    CURSOR: HAND;
    }
    .on
    {
    FONT-WEIGHT: bold;
    BORDER-COLOR: #6666ff;
    BORDER-LEFT-COLOR: #6666ff;
    BORDER-BOTTOM-COLOR: #6666ff;
    BORDER-RIGHT-COLOR: #6666ff;
    BORDER-TOP-COLOR: #6666ff;
    BACKGROUND-COLOR: #6666ff;
    WIDTH: 100px;
    COLOR: #FFFFFF;
    CURSOR: HAND;
    }
    .down
    {
    FONT-WEIGHT: bold;
    BORDER-COLOR: #6666ff;
    BORDER-LEFT-COLOR: #6666ff;
    BORDER-BOTTOM-COLOR: #6666ff;
    BORDER-RIGHT-COLOR: #6666ff;
    BORDER-TOP-COLOR: #6666ff;
    BACKGROUND-COLOR: #6666ff;
    WIDTH: 100px;
    COLOR: #000000;
    CURSOR: HAND;
    }


    I figured the id could only be used one time
    I thought about using an array to put them in but didnt know how to determine which one had focus
    Last edited by miranda; 04-03-2003 at 07:57 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •