Foros del Web » Creando para Internet » HTML »

Mover imagenes en capas con el raton

Estas en el tema de Mover imagenes en capas con el raton en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/02/2012, 17:23
 
Fecha de Ingreso: mayo-2009
Mensajes: 232
Antigüedad: 15 años, 6 meses
Puntos: 3
Mover imagenes en capas con el raton

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:
Ver original
  1. var x2;
  2.     var y2;
  3.  var x;
  4.     var y;
  5. function getCursorPosition(e) {
  6.    
  7.     if (e.pageX || e.pageY) {
  8.     x = e.pageX;
  9.     y = e.pageY;
  10.     }
  11.     else {
  12.     x = e.clientX + document.body.scrollLeft +
  13.             document.documentElement.scrollLeft;
  14.     y = e.clientY + document.body.scrollTop +
  15.             document.documentElement.scrollTop;
  16.     }
  17.     // Convert to coordinates relative to the canvas
  18.     x -= gCanvasElement.offsetLeft;
  19.     y -= gCanvasElement.offsetTop;
  20.  
  21.     if (x >= x2){  imagen.x+=1; }
  22.  
  23. //Y lo mismo con los otros movimientos
  24.  
  25. }

¿Esta bien asi?

Última edición por phyronx; 28/02/2012 a las 18:00
  #2 (permalink)  
Antiguo 28/02/2012, 21:48
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 8 meses
Puntos: 142
Respuesta: Mover imagenes en capas con el raton

¡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 
e.pageX document.getElementById('contenedor').offsetLeft;
    
document.getElementById('fondo').style.left = (2) + 'px';
    
document.getElementById('persona').style.left 'px';
},
false); 
Prueba con ello hasta que consiga tu objetivo. Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 29/02/2012, 08:05
 
Fecha de Ingreso: mayo-2009
Mensajes: 232
Antigüedad: 15 años, 6 meses
Puntos: 3
Respuesta: Mover imagenes en capas con el raton

Muchissimas graciaas!!

Etiquetas: capas, imagenes, raton
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:27.