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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with External JavaScript and CSS

    Hi Guys,
    I am tiring to create an external java script which is suppose to change a div background color when mouse over.
    I have a simple Html file as:

    Code:
    <html>
    <head>
    <script type="text/javascript" src="MouseJs.js"></script>
    <link rel="stylesheet" type="text/css" href="MouseCSS.css">
    <title>Test Mouse Over</title>
    </head>
    <body>
     <div class="box" id="col">
     </div>  
    </body>
    </html>
    and a CSS file as:
    Code:
    .box {
        width: 20%;
        height: 100px;
        background-color: #4D7530;
        float:left;
    }
    and finally I have a java script file as bellow:
    Code:
    window.onload = function()
    {
        document.getElementById('col').onmouseover = function()
        {
            document.col.background-color: #FFFFFF;
        }
    }
    Could you please let me know what i am doing wrong here?
    Thanks

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    I always find it easier to debug as a single file and move the code to external files after testing.
    Note the changes in the 'onload' function.
    Code:
    <html>
    <head>
    <!-- script type="text/javascript" src="MouseJs.js"></script -->
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=213811
    
    window.onload = function() {
        document.getElementById('col').onmouseover = function() {
            this.style.backgroundColor = '#FFFFFF';
        }
        document.getElementById('col').onmouseout = function() {
            this.style.backgroundColor = '#4d7530';
        }
    }
    
    </script>
    
    <!-- link rel="stylesheet" type="text/css" href="MouseCSS.css" -->
    <style type="text/css">
    .box {
        width: 20%;
        height: 100px;
        background-color: #4D7530;
        float:left;
        border:1px solid blue; /* for testing */
    }
    </style>
    
    <title>Test Mouse Over</title>
    </head>
    <body>
    <div id="col" class="box"></div> 
    </body>
    </html>
    I put in an 'onmouseout' function just for testing purposes.

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    JMRKER;
    thanks you for very straightforward help

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts
    You're most welcome.
    Happy to help.
    Good Luck!


  •  

    LinkBacks (?)


    Posting Permissions

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