Foros del Web » Programando para Internet » Javascript »

Al pasar el raton, vuelve a aparecer la imagen con una transicion

Estas en el tema de Al pasar el raton, vuelve a aparecer la imagen con una transicion en el foro de Javascript en Foros del Web. Hola! Estoy creando una web poco a poco, la verdad que no llevo mucho tiempo conociendo DW así que tengo algunas dudas. Lo que me ...
  #1 (permalink)  
Antiguo 14/07/2011, 07:25
 
Fecha de Ingreso: febrero-2009
Mensajes: 8
Antigüedad: 15 años, 2 meses
Puntos: 0
Pregunta Al pasar el raton, vuelve a aparecer la imagen con una transicion

Hola!

Estoy creando una web poco a poco, la verdad que no llevo mucho tiempo conociendo DW así que tengo algunas dudas.

Lo que me gustaría hacer es un portfolio para meter mis diseños. Me gustaría crear el efecto que usan esos dos diseñadores en su
pagina web (al pasar el ratón encima de las imágenes) :

http://www.martacerda.com/#/all
http://www.alextrochut.com/#/works

Que al pasar el ratón encima de la imagen de un proyecto, esa vuelva a aparecer con un movimiento lateral.

He buscado por internet pero la verdad que no he encontrado. Solo he encontrado como cambiar de imagen al pasar el raton encima.

Muchas gracias de antemano!!!
Un saludo
  #2 (permalink)  
Antiguo 14/07/2011, 08:54
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 14 años, 1 mes
Puntos: 15
Respuesta: Al pasar el raton, vuelve a aparecer la imagen con una transicion

Buscalos efectos que tiene jquery.


saludos
  #3 (permalink)  
Antiguo 14/07/2011, 15:48
 
Fecha de Ingreso: octubre-2010
Mensajes: 107
Antigüedad: 13 años, 5 meses
Puntos: 14
Respuesta: Al pasar el raton, vuelve a aparecer la imagen con una transicion

Esos ejemplos que pones son hechos en flash.

Se pueden hacer con javascript usando la imagen como fondo de un div y repitiendola en X, y con setTimeout ir cambiando la posicion de fondo cuando el cursor este over.

ó lo puedes hacer con css de esta manera

Código CSS:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <head>
  4.  
  5. <style>
  6. #imagen1{ background-image:url("http://www.ocompras.com/images/2009/10/balon-barcelona-de-nick-300x300.jpg");  height:300px; width:300px;}
  7. .imagenes{ background-repeat:repeat-x; background-position:0 0; -moz-transition: background-position .5s; -webkit-transition: background-position .5s;  -o-transition: background-position .5s}
  8. .imagenes:hover{ background-position:300px 0;}
  9. </style>
  10.  
  11. </head>
  12.  
  13. <body >
  14.  
  15. <div id="imagen1" class="imagenes"></div>
  16.  
  17. </body>
  18. </html>

pero lo probe y solo lo soportan firefox, chrome y safari. Talvez Opera necesite alguna propiedad css adicional o de manera diferente. IExplorer no tiene remedio porque ni siquiera soporta transitions.

Última edición por MARCASTELEON; 14/07/2011 a las 16:14
  #4 (permalink)  
Antiguo 16/07/2011, 09:52
 
Fecha de Ingreso: febrero-2009
Mensajes: 8
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Al pasar el raton, vuelve a aparecer la imagen con una transicion

Muchas gracias lo voy a probar a ver que tal!
Un saludo
  #5 (permalink)  
Antiguo 17/07/2011, 02:07
 
Fecha de Ingreso: febrero-2009
Mensajes: 8
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Al pasar el raton, vuelve a aparecer la imagen con una transicion

Es justo lo que buscaba Marco. Quiero intentar ponerlo en Java, ya que como tu dices, el efecto no funciona en IE y mucha gente sigue usandolo desgraciadamente...

Por casualidad, me podrías explicar como sería el codigo JAVA/html de ese efecto? Soy bastante novata y no sé crearlo yo misma... Pero eso, si tienes un hueco libre y si te apetece compartirlo conmigo, serías mi heroe ! llevo mucho tiempo buscandolo.. jeje

Muchisimas gracias de antemano!!!
Un saludo
  #6 (permalink)  
Antiguo 01/08/2011, 12:45
 
Fecha de Ingreso: febrero-2009
Mensajes: 8
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Al pasar el raton, vuelve a aparecer la imagen con una transicion

Al final despues de horas buscando algun codigo de ese efecto, sigo sin encontrarlo. No sé el nombre de ese efecto de rollover... Alguien puede echarme una mano ? Muchas gracias!

Etiquetas: pasar, raton, transicion, vuelve
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 00:40.