Simon Mouse Events

This JavaScript program shows how to use various mouse events to change the style of an element to make it appear to light up. The red element uses the mousedown and mouseup events to turn the light on and off. The green element uses the mouseover and mouseout events to turn the light on and off. The yellow element uses the onmousemove events to flash the light for half a second. The blue element uses the onclick event (left mouse button down and up) to turn the light on, the oncontextmenu event (pressing and releasing the right mouse button) to turn the light off, and the ondblclick event to flash the light on for half of a second. The appearance is similar to the classic handheld Simon game.

SimonMouseEvents.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<style type="text/css">
			.light {
				position:absolute;
				width:190px;
				height:190px;
				border:5px solid;
				border-color:#CCCCCC #444444 #222222 #888888;
				margin-left:-100px;
				margin-top:-100px;
			}
		</style>
		<script type="text/javascript">
			function FInitialization() {}
			function FFlashOnLight0() {
				FTurnOnLight0();
				setTimeout(FTurnOffLight0, 500);
			}
			function FTurnOnLight0() {
				document.getElementById("idLight0").style.backgroundColor = "red";
			}
			function FTurnOffLight0() {
				document.getElementById("idLight0").style.backgroundColor = "maroon";
			}
			function FFlashOnLight1() {
				FTurnOnLight1();
				setTimeout(FTurnOffLight1, 500);
			}
			function FTurnOnLight1() {
				document.getElementById("idLight1").style.backgroundColor = "lime";
			}
			function FTurnOffLight1() {
				document.getElementById("idLight1").style.backgroundColor = "green";
			}
			function FFlashOnLight2() {
				FTurnOnLight2();
				setTimeout(FTurnOffLight2, 500);
			}
			function FTurnOnLight2() {
				document.getElementById("idLight2").style.backgroundColor = "yellow";
			}
			function FTurnOffLight2() {
				document.getElementById("idLight2").style.backgroundColor = "olive";
			}
			function FFlashOnLight3() {
				FTurnOnLight3();
				setTimeout(FTurnOffLight3, 500);
			}
			function FTurnOnLight3() {
				document.getElementById("idLight3").style.backgroundColor = "blue";
			}
			function FTurnOffLight3() {
				document.getElementById("idLight3").style.backgroundColor = "navy";
			}
		</script>
	</head>
	<body onload="FInitialization()">
		<div style="position:absolute; background-color:#aaaaaa; width:500px; height:500px;">
			<div class="light" id="idLight0" style="background-color: maroon; left:25%; top:25%;"
				onmousedown="FTurnOnLight0()" onmouseup="FTurnOffLight0()"></div>
			<div class="light" id="idLight1" style="background-color: green; left:75%; top:25%;"
				onmouseover="FTurnOnLight1()" onmouseout="FTurnOffLight1()"></div>
			<div class="light" id="idLight2" style="background-color: olive; left:25%; top:75%;"
				onmousemove="FFlashOnLight2()"></div>
			<div class="light" id="idLight3" style="background-color: navy; left:75%; top:75%;"
				ondblclick="FFlashOnLight3()" onclick="FTurnOnLight3()" oncontextmenu="FTurnOffLight3()"></div>
		</div>
	</body>
</html>

Core JavaScript

Simon Mouse Events

SimonMouseEvents.html

Output