Temas > Programacion > Java script - Java > Eventos onMouseOver y onMouseOut en java script
Julio

Eventos onMouseOver y onMouseOut
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.
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:
<?php //esto no va
<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>
?>//esto no va
Las llamadas a las funciones las hacemos inicializando las propiedades
onMouseOver y onMouseOut:
<?php //esto no va
       <a href="pagina1.html" onMouseOver="pintar(`#ff0000`)"
       onMouseOut="pintar(`#ffffff`)">Rojo</a>
?>//esto no va
La función `pintar` recibe el color e inicializa la propiedad bgColor del
objeto document.
<?php //esto no va
       function pintar(col)
       {
         document.bgColor=col;
       }
?>//esto no va
El segundo problema pinta de color el interior de una casilla de una tabla
y vuelve a su color original cuando salimos de la misma:
<?php //esto no va
<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>
?>//esto no va
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):
<?php //esto no va
<td onMouseOver="pintar(this,`#ff0000`)"
onMouseOut="pintar(this,`#ffffff`)">rojo</td>
?>//esto no va













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar