Cómo cambiar el color de fondo en un Mouseover

En los primeros días de la Web, los diseñadores a veces se añade una sorprendente "cambio de color" efecto a sus sitios web. Cuando un visitante se acercó un cursor del ratón sobre algo en una página Web, el fondo de la página cambió de repente colores. El usuario no puede ver este efecto a menudo hoy en día, pero todavía se puede utilizar en su sitio web. Los documentos HTML se tiene un evento de "mouseover". Adjuntando a este evento para un control en su página Web, puede hacer que el control de desencadenar un cambio de color de fondo.

Instrucciones

1 Lanzar su editor de HTML o el Bloc de notas.

2 Agregue el siguiente código HTML en la sección "cuerpo" del documento: Esto crea un botón con un valor de ID de "Button1".

<Input id = type = "button" valor "Button1" = "botón">

Esto crea un botón con un valor de ID de "Button1".

3 Localiza la sección "cabeza" del documento.

4 Coloque el siguiente código dentro de esa sección:

<Script type = "text / javascript">

var Newcolor = "rojo";

var mouseoverObject = "Button1";

window.onload = function () {

document.getElementById (mouseoverObject) .onmouseover = changeColor;}

changeColor función () {

var = bodyObject document.getElementsByTagName ( "cuerpo") [0];

bodyObject.style.backgroundColor = Newcolor;

}

</ Script>

La variable denominada "Newcolor" mantiene el color del color a la que desea cambiar el fondo de la página. La variable mouseoverObject tiene el id del objeto por encima del ratón. En este ejemplo, ese objeto es el botón cuyo ID es "Button1". La función window.onload añade un evento mouseover a la mouseoverObject. Este evento llama a la función changeColor. Esa función obtiene una referencia al elemento de "cuerpo" de la página, y cambia su color de fondo al color se define en la variable Newcolor.

5 Guarde el documento y abrirlo en un navegador. Mover el puntero del ratón sobre el botón. cambios en el color de fondo de la página a rojo.

Consejos y advertencias

• En este ejemplo, un botón cuyo ID es "Button1" se inicia el cambio de color. Para hacer este trabajo con otro control como una imagen, que controlan dar un valor id, y asignarlo a la variable "mouseoverObject".
• Cambie el valor de la variable Newcolor JavaScript para el nombre de cualquier color HTML válido. Sitios como W3Schools tienen tablas de colores que muestran los nombres de los colores HTML que puede elegir.