Eventos: mousedown y mouseup

PROBLEMA

  1. Elaborar un programa que muestre un div de color rojo. Cuando se presione cambiar el color a amarillo y luego de soltar el botón del mouse volver a pintar de rojo.
Solución 
Problema 1.


<html>
<head>

<script type="text/javascript">

  addEventListener('load',inicio,false);

  function inicio()
  {
    document.getElementById('recuadro1').addEventListener('mousedown',presion1,false);
    document.getElementById('recuadro1').addEventListener('mouseup',presion2,false);
  }

  function presion1()
  {
    document.getElementById('recuadro1').style.backgroundColor='#ffff00';
  }

  function presion2()
  {
    document.getElementById('recuadro1').style.backgroundColor='#ff0000';
  }

</script>

</head>
<body>
<div style="width:200px;height:200px;background:#ff0000" id="recuadro1">
</div>

</body>
</html>


Retornar al menu