Listado completo de tutoriales

Eventos onMouseOver y onMouseOut


El evento onMouseOver se ejecuta cuando pasamos la flecha del mouse sobre un elemento HTML y el evento onMouseOut cuando la flecha abandona el mismo.

Para probar estos eventos implementaremos una página que cambie el color de un cuadrado de 200px de ancho y 200px de alto.

Implementaremos una función que cambie el color con un valor que llegue como parámetro. Cuando retiramos la flecha del mouse volvemos a pintar de negro el fondo de cuadrado:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  function pintar(col)
  {
    document.getElementById('cuadrado1').style.backgroundColor=col;
  }
</script>

<a href="#" onMouseOver="pintar('#f00')" onMouseOut="pintar('#000')">Rojo</a> -
<a href="#" onMouseOver="pintar('#0f0')" onMouseOut="pintar('#000')">Verde</a> -
<a href="#" onMouseOver="pintar('#00f')" onMouseOut="pintar('#000')">Azul</a>
<div id="cuadrado1" style="background:#000;width:200px;height:200px"></div>

</body>
</html>

Las llamadas a las funciones las hacemos inicializando las propiedades onMouseOver y onMouseOut:

<a href="#" onMouseOver="pintar('#f00')" onMouseOut="pintar('#000')">Rojo</a> -
<a href="#" onMouseOver="pintar('#0f0')" onMouseOut="pintar('#000')">Verde</a> -
<a href="#" onMouseOver="pintar('#00f')" onMouseOut="pintar('#000')">Azul</a>

Definimos un elemento 'div' de color negro de 200 píxeles de ancho y alto:

<div id="cuadrado1" style="background:#000;width:200px;height:200px"></div>

La función 'pintar' recibe el color y accedemos a la propiedad 'style' y de esta a backgroundColor:

  function pintar(col)
  {
    document.getElementById('cuadrado1').style.backgroundColor=col;
  }
Otro problema que podemos probar es pinta de color el interior de una casilla de una tabla y regresar a su color original cuando salimos de la misma:
<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  function pintar(objeto,col)
  {
    objeto.style.backgroundColor=col;
  }
</script>

<table border="1">
  <tr>
    <td onMouseOver="pintar(this,'#f00')" 
        onMouseOut="pintar(this,'#fff')">rojo</td>
    <td onMouseOver="pintar(this,'#0f0')" 
        onMouseOut="pintar(this,'#fff')">verde</td>
    <td onMouseOver="pintar(this,'#00f')" 
        onMouseOut="pintar(this,'#fff')">azul</td>
  </tr>
</table>

</body>
</html>

La lógica es bastante parecida a la del primer problema, pero en éste le pasamos como parámetro a la función la referencia a la casilla que queremos que se coloree (this):

    <td onMouseOver="pintar(this,'#f00')" 
        onMouseOut="pintar(this,'#fff')">rojo</td>
    <td onMouseOver="pintar(this,'#0f0')" 
        onMouseOut="pintar(this,'#fff')">verde</td>
    <td onMouseOver="pintar(this,'#00f')" 
        onMouseOut="pintar(this,'#fff')">azul</td>

Retornar