hey i'm trying to make a traffic light that when the mouse rolls over a certain light the colour will show.
then if the light is clicked the colour will either turn on or off...
this is what i have so long.
<html>
<head>
<style type="text/css">
#trafficLight
{
border:1px solid black;
text-align:center;
margin:10px;
background-color:#000000;
}
#redlight
{
border:1px solid black;
background-color:red;
margin:5px;
}
#orangelight
{
border:1px solid black;
background-color:orange;
margin:5px;
}
#greenlight
{
border:1px solid black;
background-color:green;
margin:5px;
}
</style>
<script type="text/javascript" language="jscript">
var count = 0;
function hoverOn()
{
document.getElementById("redlight") = this.style.backgroundColor='red';
document.getElementById("orangelight") = this.style.backgroundColor='orange';
document.getElementById("greenlight") = this.style.backgroundColor='green';
}
function hoverOff()
{
document.getElementById("redlight") = this.style.backgroundColor='#F9F9F9';
document.getElementById("orangelight") = this.style.backgroundColor='#F9F9F9';
document.getElementById("greenlight") = this.style.backgroundColor='#F9F9F9';
}
function ColourOnOff()
{
if(count == 0)
{
document.getElementById("redlight") = this.style.backgroundColor = 'white';
document.getElementById("orangelight") = this.style.backgroundColor = 'white';
document.getElementById("greenlight") = this.style.backgroundColor = 'white';
var count = 1;
}
else if(count == 1)
{
document.getElementById("redlight") = this.style.backgroundColor = 'red';
var count = 0;
}
/*
var div = document.getElementById( 'redlight' );
div.onmouseover = function() {
document.getElementById("redlight").innerHTML = 'blue';
//var h2s = this.getElementsByTagName( 'h2' ); this.style.backgroundColor =
//h2s[0].style.backgroundColor = 'blue';
};
div.onmouseout = function() {
document.getElementById("redlight") = this.style.backgroundColor = 'transparent';
//var h2s = this.getElementsByTagName( 'h2' );
//h2s[0].style.backgroundColor = 'transparent';
};
*/
alert("working mo fo");
}
</script>
</head>
<body>
<div id="trafficLight" style="height:178px; width:62px">
<div id="redlight" style="height:50px; width:50px" onClick="ColourOnOff()"></div><!--end of div redLight-->
<div id="orangelight" style="height:50px; width:50px" onMouseOver="hoverOn()" onMouseOut="hoverOff()" ></div><!--end of div orangeLight-->
<div id="greenlight" style="height:50px; width:50px" onMouseOver="this.style.backgroundColor='green';" onMouseOut="this.style.backgroundColor='#F9F9F9';"></div><!--end of div greenLight-->
</div><!--end of div trafficLight-->
<div id="trafficLight" style="height:100px; width:37px">
<div id="redlight" style="height:25px; width:25px" onMouseOver="this.style.backgroundColor='red';" onMouseOut="this.style.backgroundColor='#F9F9F9';"></div><!--end of div redLight-->
<div id="orangelight" style="height:25px; width:25px" onMouseOver="this.style.backgroundColor='orange';" onMouseOut="this.style.backgroundColor='#F9F9F9';"></div><!--end of div orangeLight-->
<div id="greenlight" style="height:25px; width:25px" onMouseOver="this.style.backgroundColor='green';" onMouseOut="this.style.backgroundColor='#F9F9F9';"></div><!--end of div greenLight-->
</div><!--end of div trafficLight-->
</body>
</html>if anyone knows how to make the individual lights round that would be first prize too.
Thank you!