...

View Full Version : 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" 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.

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum