<html>
<head>
<title>ejercicio avanzado 2</title>
</head>
<script>
function semaforo1()
{
var variable1=document.getElementById('arriba')
if (variable1.src.match("semaforo_rojo.png"))
{
variable1.src="semaforo_apagado.png";
}
else
{
variable1.src="semaforo_rojo.png";
}
}
function semaforo2()
{
var variable2=document.getElementById('medio')
if (variable2.src.match("semaforo_amarillo.png"))
{
variable2.src="semaforo_apagado.png";
}
else
{
variable2.src="semaforo_amarillo.png";
}
}
function semaforo3()
{
var variable3=document.getElementById('abajo')
if (variable3.src.match("semaforo_verde.png"))
{
variable3.src="semaforo_apagado.png";
}
else
{
variable3.src="semaforo_verde.png";
}
}
</script>
<body>
<center>
<img id="arriba" onMouseOver="semaforo1()" onMouseOut="semaforo1()" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<img id="medio" onMouseOver="semaforo2()" onMouseOut="semaforo2()" src="semaforo_apagado.png" width="190" height="190" onMouseOver="semaforo2()"></img>
<br/>
<img id="abajo" onMouseOver="semaforo3()" onMouseOut="semaforo3()" src="semaforo_apagado.png" width="190" height="190" onMouseOver="semaforo3()"></img>
<br/>
</center>
</body>
</html>