Javascript CSS rollover problem

Posted 24 December 2008 - 04:54 AM

I have some code to change the background color of DIV tags. Each DIV is a little block.

It was not working now it is and I thought I would leave in case someone could use it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Dynamic CSS Properties</title>
	<style type="text/css">
	#box1{
	position: absolute;
	top: 20px;
	left: 50px;
	width: 200px;
	height: 150px;
	border: solid #ff0000 3px;
	background-color: #ffff00;
	color: #000000;
	padding: 10px;
	}

	#box2{
	position: absolute;
	top: 20px;
	left: 250px;
	width: 200px;
	height: 150px;
	border: solid #ff0000 3px;
	background-color: #ffff00;
	color: #000000;
	padding: 10px;
	}

	</style>

	<script language="Javascript">





	function change(id){

	document.getElementById(id).style.borderColor = "#0000ff";
	document.getElementById(id).style.backgroundColor = "#000000";
	document.getElementById(id).style.color = "#ffffff";

	}


	function change_back(id){


   	document.getElementById(id).style.borderColor = "#ff0000";
	document.getElementById(id).style.backgroundColor = "#ffff00";
	document.getElementById(id).style.color = "#000000";


	}
	</script>
</head>

<body>
<div id="box1" onmouseover="change('box1')" onmouseout="change_back('box1')"></div>



<div id="box2" onmouseover="change('box2')" onmouseout="change_back('box2')">

</div>


</body>
</html>

This post has been edited by jjsaw5: 24 December 2008 - 05:44 AM