[SOLUCIONADO] Como cambiar la imagen de fondo de una pagina web con el movimiento del mouse

[evegatuna]

Hola, buenas, no se si estoy en el lugar correcto, lo siento si me equivoque no estoy segura con que se resuelve esto.

Bueno quisiera saber como hacer que el background cambie de imagenes a medida que el mouse circula por la pagina...como por ejemplo esto:

http://www.apulanej.com/Flash/Home_Flash.html

Gracias por su ayuda!!

[emprear]

Tu ejemplo no es el más indicado, ya que usa flash no javascript.
Con javascript se podría hacer, la idea es dividir la página creando dinamicamente una cantidad de divs x, digamos 20 divs de 5% de ancho y 100% de alto, añadiendo a estas un evento onmouseover que llame una función que cambie el background de fondo aplicadole un efecto fade.
Saludos

[evegatuna]

Emprear, gracias por responder. trate de buscar por internet alguna guia pra realizar lo que me dijiste pero no encontre, por lo que desistire de la idea. de todas formas muchas gracias por tu ayuda.

Saludos!

[rosonator]

Iniciado por emprear

Tu ejemplo no es el más indicado, ya que usa flash no javascript.
Con javascript se podría hacer, la idea es dividir la página creando dinamicamente una cantidad de divs x, digamos 20 divs de 5% de ancho y 100% de alto, añadiendo a estas un evento onmouseover que llame una función que cambie el background de fondo aplicadole un efecto fade.
Saludos

O eso o atender a un onMouseMove listener cada cierto periodo, pongamos 1s, para no saturar, algo así:

Código:

window.addEventListener('load',run,false); //Función run se ejecuta en onLoad

var background = document.getElementByTag("body");
var movimiento=false;

document.addEventListener('mousemove',function(evt){ //cuando el ratón se mueva, movimiento=true;
         movimiento = true;    //
 },false);


function run() {
	
         if (movimiento) { //si se ha movido...
                   movimiento = false; //reseteo
                   //random o alguna clase de orden, tú eliges
                   //background.style.background-image="...... "; //cambiar imagen
         }

	setTimeout(run,1000); //run() se repite cada segundo
}

Así debería tirar fácil y bien. Ah, setTimeot toma milisegundos por unidad, tenlo en cuenta a la hora de jugar con ello.

[evegatuna]

Iniciado por rosonator

O eso o atender a un onMouseMove listener cada cierto periodo, pongamos 1s, para no saturar, algo así:

Código:

window.addEventListener('load',run,false); //Función run se ejecuta en onLoad

var background = document.getElementByTag("body");
var movimiento=false;

document.addEventListener('mousemove',function(evt){ //cuando el ratón se mueva, movimiento=true;
         movimiento = true;    //
 },false);


function run() {
	
         if (movimiento) { //si se ha movido...
                   movimiento = false; //reseteo
                   //random o alguna clase de orden, tú eliges
                   //background.style.background-image="...... "; //cambiar imagen
         }

	setTimeout(run,1000); //run() se repite cada segundo
}

Así debería tirar fácil y bien. Ah, setTimeot toma milisegundos por unidad, tenlo en cuenta a la hora de jugar con ello.

gracias!!!! me ayudaste un monton