 |
Eventos onMouseOver y onMouseOut
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:
<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('#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:
La función 'pintar' recibe el color y accedemos a la propiedad 'style' y de esta a backgroundColor:
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:
<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,'#0f0')" onMouseOut="pintar(this,'#fff')">verde</td>
<td onMouseOver="pintar(this,'#00f')" onMouseOut="pintar(this,'#fff')">azul</td>