1 Replies - 817 Views - Last Post: 24 December 2008 - 09:56 PM

#1 codeninja  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 16-February 07

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


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript CSS rollover problem

#2 Martyr2  Icon User is online

  • Programming Theoretician
  • member icon

Reputation: 4316
  • View blog
  • Posts: 12,095
  • Joined: 18-April 07

Re: Javascript CSS rollover problem

Posted 24 December 2008 - 09:56 PM

Thanks for the tips. It is appreciated. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1