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 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:
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 type="text/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>
</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;
}
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></head>
<body>
<script type="text/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>
No hay comentarios.:
Publicar un comentario