Cita:
Iniciado por IsaBelM 
el código que te he facilitado es el que has de usar. en lugar de cambiar el fondo de los bloques, cambias el src de las imágenes
por mi parte ya te he dado las indicaciones para que puedas hacerlo. otra cosa es que hagas oídos sordos
Lo que pasa es que ya le contagiaste lo de meter código como si fuese cita, y no te da más bola para no llevarse otra costumbre peor.
Hace mucho tiempo comencé a hacer un experimento con semáforos. Era para otra cosa, pero en las pruebas usé una foto (muy mala) que quise aprovechar porque estaba.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>SEMÁFORO.</title>
<script type="text/javascript">
var R, G, B;
function color() {
var tono = Math.floor(Math.random()*255);
return tono;
}
function luces() {
var senal0 = Math.floor(Math.random()*10);
var senal = document.getElementById("optica" + senal0 +"");
var RGB =
(senal.style.backgroundColor == "transparent") ?
"rgb(" + color() + "," + color() + "," + color() + ")" :
"transparent";
senal.style.backgroundColor = RGB;
setTimeout(luces , 456);
}
onload = luces;
</script>
<style type="text/css">
#marco {position: relative; height: 640px; width: 480px; margin: 0 auto;
background-color: #393939; overflow: hidden;
background-image: url(http://img31.imageshack.us/img31/8186/semaforobyn.jpg); }
#sf0 {position: absolute; top:0; left: 0; height: 640px; width: 480px; }
.opticas {width:100px; height: 90px; position: absolute;
background-color: transparent; }
#optica0 {top:0px; left:50px; }
#optica1 {top:90px; left:50px; height: 80px; }
#optica2 {top:171px; left:50px; }
#optica3 {top:-5px; left:200px; }
#optica4 {top:86px; left:200px; height: 80px; }
#optica5 {top:168px; left:200px; }
#optica6 {top:300px; left:240px; }
#optica7 {top:410px; left:240px; }
#optica8 {top:422px; left:30px; }
#optica9 {top:320px; left:30px; }
</style>
</head>
<body>
<h2>Semáforo fumado.</h2>
<div id="marco">
<div id="optica0" class="opticas"></div>
<div id="optica1" class="opticas"></div>
<div id="optica2" class="opticas"></div>
<div id="optica3" class="opticas"></div>
<div id="optica4" class="opticas"></div>
<div id="optica5" class="opticas"></div>
<div id="optica6" class="opticas"></div>
<div id="optica7" class="opticas"></div>
<div id="optica8" class="opticas"></div>
<div id="optica9" class="opticas"></div>
<img src="http://img594.imageshack.us/img594/2787/semaforocolor.png" id="sf0">
</div>
</body>
</html>
Hoy vi este tema ya terminado, y ya que estoy dejo una versión que cambia la luz cuando se le pasa el puntero.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>SEMÁFORO.</title>
<script type="text/javascript">
function luz(o){
var optik = document.getElementById(o);
optik.style.visibility = (optik.style.visibility == "visible")? "hidden" : "visible";
}
</script>
<style type="text/css">
#marco {position: relative; height: 640px; width: 480px; margin: 0 auto;
background-color: #393939; overflow: hidden;
background-image: url(http://img31.imageshack.us/img31/8186/semaforobyn.jpg); }
#sf0 {position: absolute; top:0; left: 0; height: 640px; width: 480px; }
.opticas {width:100px; height: 90px; position: absolute; visibility: hidden; }
#optica0 {top:0px; left:50px; background-color: #ff0000; }
#optica1 {top:90px; left:50px; height: 80px; background-color: #ffff00; }
#optica2 {top:171px; left:50px; background-color: #00ff00; }
#optica3 {top:-5px; left:200px; background-color: #ff0000; }
#optica4 {top:86px; left:200px; height: 80px; background-color: #ffff00; }
#optica5 {top:168px; left:200px; background-color: #00ff00; }
#optica6 {top:300px; left:240px; background-color: #ffaa00;}
#optica7 {top:410px; left:240px; background-color: #dddddd;}
#optica8 {top:422px; left:30px; background-color: #00ff00; }
#optica9 {top:320px; left:30px; background-color: #ff9900; }
</style>
</head>
<body>
<h2>Semáforo cambia al pasar el puntero.</h2>
<div id="marco">
<div id="optica0" class="opticas"></div>
<div id="optica1" class="opticas"></div>
<div id="optica2" class="opticas"></div>
<div id="optica3" class="opticas"></div>
<div id="optica4" class="opticas"></div>
<div id="optica5" class="opticas"></div>
<div id="optica6" class="opticas"></div>
<div id="optica7" class="opticas"></div>
<div id="optica8" class="opticas"></div>
<div id="optica9" class="opticas"></div>
<map name="miSemaforo">
<area shape=circle coords=100,60,30 onmouseover="luz('optica0')" href="javascript:void()">
<area shape=circle coords=100,150,30 onmouseover="luz('optica1')" href="javascript:void()">
<area shape=circle coords=100,230,30 onmouseover="luz('optica2')" href="javascript:void()">
<area shape=circle coords=240,60,30 onmouseover="luz('optica3')" href="javascript:void()">
<area shape=circle coords=240,140,30 onmouseover="luz('optica4')" href="javascript:void()">
<area shape=circle coords=250,230,30 onmouseover="luz('optica5')" href="javascript:void()">
<area shape=rect coords=320,300,250,400 onmouseover="luz('optica6')" href="javascript:void()">
<area shape=rect coords=320,420,270,504 onmouseover="luz('optica7')" href="javascript:void()">
<area shape=circle coords=90,470,30 onmouseover="luz('optica8')" href="javascript:void()">
<area shape=circle coords=90,370,30 onmouseover="luz('optica9')" href="javascript:void()">
</map>
<img src="http://img594.imageshack.us/img594/2787/semaforocolor.png"
id="sf0" usemap="#miSemaforo">
</div>
</body>
</html>
El desafío sería hacer la verdadera secuencia, y que trabaje por sí misma. Varía en cada ciudad, pero mientras tenga su lógica, sirve.
Por supuesto que es para quien esté aprendiendo y quiera practicar. Vos,
IsaBelM, ya estás grande y te pelás la naranja sola; no te quiero ver poniendo un ejemplo.
Y menos entre etiquetas de cita.
◙
◙