SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anyone know how to, with Javascript, change the background of a table cell when the mouse is over it, but change back when the mouse leaves?

    Like:
    <td onmouseover="changecolor('#003399')" onmouseout="changecolor('#FFFFFF')">

    What would the changecolor() function be defined as? Thanks in advance...
    Last edited by qslack; Apr 24, 2001 at 15:43.

  2. #2
    Irritability Defined
    Join Date
    Jul 2000
    Location
    80,000 feet below the surface
    Posts
    1,442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you need it to be cross-browser? (because it is simple to achieve in IE, but a b*stard to do in Netscape (if even possible))
    My 2 Cents (or is that 2.2 Cents including GST?)

  3. #3
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's fine if it doesn't work in Netscape 4.7 (although, shouldn't the same code work in NS6 and IE5?) or any other browsers.

    This is one of the few times where I use Javascript, because I think it actually adds something to the usability of the page and it won't ruin the page for non-JS browsers.

    Thanks!

  4. #4
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, well I found what I needed to do.

    <script language="javascript">
    if(navigator.appName=="Explorer"&&parseInt(navigator.appVersion)>=4){
    function mover(src){if(!src.contains(event.fromElement)){src.bgColor = '#003399';}}
    function mout(src){if(!src.contains(event.toElement)){src.bgColor = '#FFFFFF';}}
    function click(src){if(event.srcElement.tagName=='TD'){src.children.tags('A')[0].click();} }}
    </script>

    Then for each <td> tag you need to make onmouseover="mover(this)" and onmouseout="mout(this)"

    Check how I used this in my page at http://aboutpcs.com/pcs/design.html
    Last edited by qslack; Apr 24, 2001 at 18:27.

  5. #5
    Irritability Defined
    Join Date
    Jul 2000
    Location
    80,000 feet below the surface
    Posts
    1,442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup, that was the exact method I had..
    My 2 Cents (or is that 2.2 Cents including GST?)

  6. #6
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here it is for IE and NS:

    http://www.pageresource.com/dhtml/jtut6.htm

    aDog


Bookmarks

Posting Permissions

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