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!

Recommended Answers

All 6 Replies

Member Avatar for stbuchok

You can try this (attached is a zip file with everything in it you will need):

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

<html>
<head>
<title></title>

<script src="jquery-1.6.4.min.js"></script>

<script>

$(function(){
	$('[data-selected]').css({ 'opacity': 0.5 });

	$('[data-selected=false]').live('mouseover', function(){
		$(this).css({ 'opacity': 1.0 });
	}).live('mouseout', function(){
		$(this).css({ 'opacity': 0.5 });
	}).live('click', function(){
		$(this).attr('data-selected', 'true');
		$(this).css({ 'opacity': 1.0 });
	});

	$('[data-selected=true]').live('click', function(){
		$(this).attr('data-selected', 'false');
		$(this).css({ 'opacity': 0.5 });
	});
});

</script>

<style>

.lightPost
{
	width: 304px;
	height: 350px;
	background-image: url('img/light.png');
	position: absolute;
}

.red
{
	background-image: url('img/red.png');
	position: absolute;
	width: 69px;
	height: 72px;
	top: 54px;
	left: 119px;
}

.yellow
{
	background-image: url('img/yellow.png');
	position: absolute;
	width: 71px;
	height: 70px;
	top: 153px;
	left: 118px;
}

.green
{
	background-image: url('img/green.png');
	position: absolute;
	width: 71px;
	height: 70px;
	top: 251px;
	left: 118px;
}

</style>

</head>
<body>

<div class="lightPost">
	<div class="red" data-selected="false"></div>
	<div class="yellow" data-selected="false"></div>
	<div class="green" data-selected="false"></div>
</div>

</body>
</html>

hey cool man. only thing is that i can't seem to download the .zip file!

any chance of you putting it up there again for me to try.

Thanks

Member Avatar for stbuchok

here you go

yea shot but just a pic of a traffic light with no actions isn't what i need. thanks though

Member Avatar for stbuchok

Forgot to include the jQuery file, but I kinda assumed you'd at least look at the code and figure that out for yourself.

If you look at the code, you'd see that there are mouseover, mouseout and click events.

i did notice it was missing a jQuery file but i figured it out anyways.

Once again - thanks for your time and i will def have another look now that i have the last piece

shot

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.