Como hacer una pagina web y ganar dinero
Creada para aprender lo que mas nesesitas porque la calidad es mejor que la cantidad.
Blog

Cambiar color de fondo con onMouseOver y onMouseOut en Javascript

Tags: cambiar, color, eventos, fondo, con, onmanual, mouseover, html, onmouseout, tabla, javascript
publicado el 2010-07-18   leido 6710 leídas

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>

Te gust?

Control RADIO en JavaScript

Redireccionar con location en JavaScript

 
Información
Christian Valencia publicado porPor: Ero-Fierce

Suscribete
Recibe los ultimos articulos en tu email:

Indice.
Javascript

Ultimos Artculos
Hacer SEO en el 2016 - 2017
Habilitar sonido al pulsar las teclas Bloq Mayús, Bloq Num y Bloq Des
10 trucos viejos, seo que nunca te dijeron
15 Efectos carrusel como pagina de libro animado con ejemplos
No se pudo generar una instancia de usuario de SQL Server debido a un error (.mdf
Solucion Error 26. No se encontró el servidor o éste no estaba accesible. Sql

Todos los tutoriales

Hacer una web paso a paso Php y MySQL Javascript
Posicionamiento Web SEO Cómo ganar dinero con tu web Herramientas y Programas Web
Maquetación con CSS Hosting y Dominios MySQL y Phpmyadmin
Ajax UML: Analisis y Diseño Programacion Orientada a Objetos
Java
 
Copyright © 2009 - pagina Web 2 - Todos los derechos Reservados