Javascript Controlling CSS Question

nova912 · #1 (**permalink**) 05-17-06, 09:44 AM

Ok i want to crate a "simple" roll over using javascript and css.

But i cant seem to figure it out, here is my code...

Code:

<style type="text/css">
		#intro {background-color: white}
		</style>
		<script language="Javascript" type="text/javascript">
		function rollover(var)
					{
					element = document.getElementById(var);
					element.background-color = "gray";
					}
</script>

What am i missing? This is triggered by a mouseover event that calls this function like so

Code:

onmouseover="rollover('intro')"

Thanks.

Nico · #2 (**permalink**) 05-17-06, 10:08 AM

A couple of things.

Don't use "var" as varible name.
There are no "-"s in style attributes. Use "backgroundColor" instead. (More info)
And there should be a "style" (eg: style.backgroundColor = 'grey')

This works for me

Code:

<style type="text/css">
#intro {background-color: white}
</style>

<script language="Javascript" type="text/javascript">

function rollover(obj)
{
	element = document.getElementById(obj).style;
	element.backgroundColor = "gray";
}
</script>

<div id="intro" onmouseover="rollover('intro');">Testing...</div>

nova912 · #3 (**permalink**) 05-17-06, 10:32 AM

Thanks you rock!

ndthuan · #4 (**permalink**) 04-25-09, 08:45 AM

Hi, I suggest another solution which decreases your HTML

Code:

<style type="text/css">
#intro {background-color: white}
</style>

<script language="Javascript" type="text/javascript">

function rollover(obj)
{
	obj.style.backgroundColor = "gray";
}
</script>

<div id="intro" onmouseover="rollover(this);">Testing...</div>

job0107 · #5 (**permalink**) 04-26-09, 07:45 AM

Instead of using the "id" of the element, you could assign a "class" to the element and then use the mouse events to change the class name.

In this little program, when you mouse over an object it turns gray.
And when you mouse out, the object turns white again unless you click on the object, it will turn another color until you click on it again.

This would be useful if you wish to select only certain objects.

Javascript Code:

<html>
<head>
<style type="text/css">
.white {background-color: white}
.gray {background-color: gray}
.red {background-color: red}
.green {background-color: green}
.blue {background-color: blue}
#div1, #div2, #div3
{
 width:100px;
 border:1px solid #000;
 margin-bottom:5px;
 }
#div4 {margin-top:10px;}
</style>
<script language="Javascript" type="text/javascript">
function rollover(obj, v)
{
 document.getElementById("div4").style.display = "block";
 document.getElementById("rec").innerHTML = "";
 switch(v)
 {
  case 0:
   if(obj.className == "gray"){obj.className = "white";}
   break;
  case 1:
   if(obj.className == "white"){obj.className = "gray";}
   break;
  case 2:
   obj.className = obj.className == "red" ? "gray" : "red";
   break;
  case 3:
   obj.className = obj.className == "green" ? "gray" : "green";
   break;
  case 4:
   obj.className = obj.className == "blue" ? "gray" : "blue";
   break;
  }
 }
function display_selected_objects(v)
{
 document.getElementById("div4").style.display = "none";
 var output = "<p>";
 var obj = v.split(",");
 for(var i = 0; i < obj.length; i++)
 {
  if(document.getElementById(obj[i]).className != "white"){output +=  "<span style='color:blue;'>" + document.getElementById(obj[i]).innerHTML + " is selected.</span><br />";}
  else{output +=  "<span style='color:red;'>" + document.getElementById(obj[i]).innerHTML + " is not selected.</span><br />";}
  }
 document.getElementById("rec").innerHTML = output;
 }
</script>
</head>
<body>
<div id="div1" class="white" onclick="rollover(this,2);" onmouseover="rollover(this,1);" onmouseout="rollover(this,0);">Testing...1</div>
<div id="div2" class="white" onclick="rollover(this,3);" onmouseover="rollover(this,1);" onmouseout="rollover(this,0);">Testing...2</div>
<div id="div3" class="white" onclick="rollover(this,4);" onmouseover="rollover(this,1);" onmouseout="rollover(this,0);">Testing...3</div>
<div id="div4"><a href="#" onclick="display_selected_objects('div1,div2,div3');">Display selected objects.</a></div>
<div id="rec"></div>
</body>
</html>