Foros del Web - Ver Mensaje Individual

Gustavo72 · #4 (**permalink**) 01/12/2012, 08:01

Yo lo haría así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<title>ejercicio avanzado</title>
<script>
var sem=2;
function semaforo() {
  sem++;
  if (sem>2)
    sem=0;
        
  document.getElementById('arriba').src=(sem==2 ? 'semaforo_rojo.png' : 'semaforo_apagado.png');
  document.getElementById('medio').src=(sem==1 ? 'semaforo_amarillo.png' : 'semaforo_apagado.png');
  document.getElementById('medio').src=(sem==0 ? 'semaforo_verde.png' : 'semaforo_apagado.png');
}
</script>
</head>
<body>
<div style="text-align: center;">
<img id="arriba" src="semaforo_apagado.png" width="190" height="190"><br/>
<img id="medio" src="semaforo_apagado.png" width="190" height="190"><br/>
<img id="abajo" src="semaforo_apagado.png" width="190" height="190"><br/>
<button onclick="semaforo()">cambiar semaforo</button>
</div>
</body>
</html>