Mover imagenes en capas con el raton

[phyronx]

Buenas foreros.

Tengo que crearle una paginilla a mi cuñado y quiero crear un efecto con una foto.
Lo vi en alguna web, y en flash sabria hacerlo, pero prefiriria aprender ha hacerlo en html5.

Solo se trata de cargar dos imagenes, una sobre la otra "la segunda un gif con transparencias", Por ejemplo un fondo y encima una persona. Al pasar el raton por encima se crea como el efecto de profundidad, al mover el raton a la izquierda las imagenes se muevan a la derecha (una mas que la otra), y viceversa.

La teoria la se, lo que necesito saber es si debo crear la imagen dentro del canvas o lo hago sin el canvas.

Despues que seria,¿

imagen.onmouseover{

"aqui saber si el raton se mueve i hacia donde, que encontre algun tutorial"

if("mouse x cambia"){

imagen.x += "nueva posicion segun raton y lo mismo con y"
}

}

?


Aver si me podeis ech r una mano


PD: Busque mucho, pero no encontre como mover la imagen.


Encontre la parte del raton, e intente modificarla:

Código HTML:

var x2;
    var y2;
 var x;
    var y;
function getCursorPosition(e) {
   
    if (e.pageX || e.pageY) {
    x = e.pageX;
    y = e.pageY;
    }
    else {
    x = e.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
    }
    // Convert to coordinates relative to the canvas
    x -= gCanvasElement.offsetLeft;
    y -= gCanvasElement.offsetTop;
 
    if (x >= x2){  imagen.x+=1; }
 
//Y lo mismo con los otros movimientos
 
}
 

¿Esta bien asi?

[daPhyre]

¡Conozco ese efecto! Y de hecho no requieres nada muy avanzado. Con un simple HTML4, un div y JavaScript podrías hacerlo sin problemas.

El html:

Código HTML:

<div id="contenedor">
<img src="fondo.jpg" alt="Fondo" id="fondo" />
<img src="persona.gif" alt="Persona" id="persona" />
</div> 

El CSS:

Código:

#contenedor{width:400px;height:300px;position:relative;overflow:hidden}
#fondo, #persona{position:absolute}

El Javascript:

Código PHP:

  document.addEventListener('mousemove',function(e){
    var x = e.pageX - document.getElementById('contenedor').offsetLeft;
    document.getElementById('fondo').style.left = (x / 2) + 'px';
    document.getElementById('persona').style.left = x + 'px';
},false);  
   

Prueba con ello hasta que consiga tu objetivo. Suerte

[phyronx]

Muchissimas graciaas!!