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>

    <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>

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

</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>

    <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>

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

</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