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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onMouseOver/Out: can it be changed using JS?

    This seems like it should be easy, but I am obviously missing something. I would greatly appreciate any insight anyone could offer.

    Let's say I have a TableData object that looks like this when the page loads:


    <td id="apptab" width="20%" bgcolor="white" class="cellbox" align="center" onMouseOver="this.style.background='blue'" onMouseOut="this.style.background='white'"> <b>App</b></td>


    Is it possible to use JS to change the value of the onMouseOver and onMouseOut events? In other words, could I call a script from the onClick event of some other page element that would execute the following code, changing the properties of the onMouseOver event without reloading the page?


    document.getElementById("apptab").onMouseOver="this.style.background='green'";


    The above code does not work and I don't know why. It also does not return any error.

    Thanks a bunch!

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you are going to try to change the style properties use style (background-color) not bgcolor which was long ago deprecated....

    Also, javascript uses the camelCase naming convention when referencing hyphenated properties.... EG: background-color == backgroundColor....

    Lastly, it is onmouseover (lowercase) not onMouseOver (mixed case)... although most browsers will still properly assign, your pages will not validate for anything other than HTML 3.1 or whatever....

    Code:
    <table><tr>
    <td id="apptab" style="width:20%;background-color:white;text-align:center"
    onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='white'"> <b>App</b></td>
    </tr></table>
    <a href="#" onclick="document.getElementById('apptab').onmouseover=function(){alert('this is a new function')}">Change apptab onmouseover function</a>
    .....Willy

  • #3
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    many thanks!


  •  

    Posting Permissions

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