я не очень понял суть ну ладно вот так надо сделать:
<html>
<head>
<title>
</title>
<style type="text/css">
button{height:10%; color:yellow; background-color:black; position:absolute; cursorointer;}
</style>
</head>
<body onload=off()>
<img src="fon.jpg" height=80% style="z-index:0">
<img src="red.png" width=12% height=25% style="z-index:1; position:absolute;left:8%; top:3%; opacity:0.4" Id="red">
<img src="yellow.png" width=12% height=25% style="z-index:1; position:absolute;left:8%; top:28%; opacity:0.4" Id="yellow">
<img src="green.png" width=12% height=25% style="z-index:1; position:absolute;left:8%; top:53%; opacity:0.4" Id="green">
<button style="top:30%;" onclick="clearInterval(ofInter);start()">Включить</button>
<script type='text/javascript'>
var red = document.getElementById('red');
var yellow = document.getElementById('yellow');
var green = document.getElementById('green');
function off()
{
setTimeout(yellowmig1, 1000)
setTimeout(yellowmig2, 2000)
}
off();
ofInter = setInterval('off()', 3000);
function red()
{
red.style.opacity="1.0";
}
function yellowmig1()
{
yellow.style.opacity="1.0";
}
function yellowmig2()
{
yellow.style.opacity="0.4";
}
function green()
{
red.style.opacity="0.4";
green.style.opacity="1.0";
}
function green1()
{
green.style.opacity="0.4";
}
function green2()
{
green.style.opacity="1.0";
}
function start()
{
setTimeout(red, 5000)
setTimeout(yellowmig1, 10000)
setTimeout(yellowmig2, 11000)
setTimeout(yellowmig1, 12000)
setTimeout(yellowmig2, 13000)
setTimeout(yellowmig1, 14000)
setTimeout(yellowmig2, 15000)
setTimeout(yellowmig1, 16000)
setTimeout(yellowmig2, 17000)
setTimeout(yellowmig1, 18000)
setTimeout(yellowmig2, 19000)
setTimeout(green, 20000)
setTimeout(green1, 21000)
setTimeout(green2, 22000)
setTimeout(green1, 23000)
setTimeout(green2, 24000)
setTimeout(green1, 25000)
setTimeout(yellowmig1, 26000)
setTimeout(yellowmig2, 31000)
setTimeout('start()', 27000)
}
</script>
</body>
</html>