El evento
onMouseOver se ejecuta cuando pasamos la flecha del mouse sobre un hipervínculo y el evento
onMouseOut cuando la flecha abandona el mismo.
Pintar el color de fondo del documento
Para probar estos eventos implementaremos una página que cambie el color de fondo del documento.
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 blanco el fondo del documento:
<html>
<head></head>
<body>
<script language="JavaScript">
function pintar(col)
{
document.bgColor=col;
}
</script>
<a href="pagina1.html" onMouseOver="pintar('#ff0000')"
onMouseOut="pintar('#ffffff')">Rojo</a>
-
<a href="pagina1.html" onMouseOver="pintar('#00ff00')"
onMouseOut="pintar('#ffffff')">Verde</a>
-
<a href="pagina1.html" onMouseOver="pintar('#0000ff')"
onMouseOut="pintar('#ffffff')">Azul</a>
<br>
<br>
<br>
<a href="pagina2.html">ver segundo problema</a>
</body>
</html>
Las llamadas a las funciones las hacemos inicializando las propiedades
onMouseOver y
onMouseOut<a href="pagina1.html" onMouseOver="pintar('#ff0000')"
onMouseOut="pintar('#ffffff')">Rojo</a>
La función 'pintar' recibe el color e inicializa la propiedad bgColor del objeto document.
function pintar(col)
{
document.bgColor=col;
}Pintar el color de fondo de una tabla
El segundo problema pinta de color el interior de una casilla de una tabla y lo regresa a su color original cuando salimos de la misma:
<html>
<head></head>
<body>
<script language="JavaScript">
function pintar(objeto,col)
{
objeto.bgColor=col;
}
</script>
<table border="1">
<tr>
<td onMouseOver="pintar(this,'#ff0000')" onMouseOut="pintar(this,'#ffffff')">rojo</td>
<td onMouseOver="pintar(this,'#00ff00')" onMouseOut="pintar(this,'#ffffff')">verde</td>
<td onMouseOver="pintar(this,'#0000ff')" onMouseOut="pintar(this,'#ffffff')">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,'#ff0000')" onMouseOut="pintar(this,'#ffffff')">rojo</td>
2010-07-18 
11379 leídas 
