Problem with External JavaScript and CSS

Behseini

01-02-2011, 12:47 AM

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:

<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:

.box {
width: 20%;
height: 100px;
background-color: #4D7530;
float:left;
}

and finally I have a java script file as bellow:

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

jmrker

01-02-2011, 02:42 AM

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.

<html>
<head>


<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>


<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.

Behseini

01-02-2011, 08:28 AM

JMRKER;
thanks you for very straightforward help

jmrker

01-02-2011, 03:41 PM

You're most welcome.
Happy to help.
Good Luck!
:)