Novedades ES6

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.

Definición y uso de onmouseover

El evento onmouseover ocurre cuando el puntero del mouse se mueve sobre un elemento o sobre uno de sus elementos secundarios.

Etiquetas HTML compatibles: TODOS los elementos HTML, EXCEPTO: <base>, <bdo><br> , <head> , <html>, <iframe> , <meta> , <param>, <script> , <style> y <title>

Sugerencia: este evento se usa a menudo junto con el evento onmouseout , que ocurre cuando un usuario mueve el puntero del mouse fuera de un elemento.


Definición y uso de onmouseout


El evento onmouseout ocurre cuando el puntero del mouse se mueve fuera de un elemento o fuera de uno de sus elementos secundarios.

Etiquetas HTML compatibles: TODOS los elementos HTML, EXCEPTO: <base>, <bdo><br> , <head> , <html>, <iframe> , <meta> , <param>, <script> , <style> y <title>

Sugerencia: Este evento se usa a menudo junto con el evento onmouseover , que ocurre cuando el puntero se mueve a un elemento o a uno de sus elementos secundarios.

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>