Ver Mensaje Individual
  #3 (permalink)  
Antiguo 14/07/2011, 15:48
MARCASTELEON
 
Fecha de Ingreso: octubre-2010
Mensajes: 107
Antigüedad: 14 años, 1 mes
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