Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/03/2013, 01:52
rascabuchitos
 
Fecha de Ingreso: abril-2011
Ubicación: Peru
Mensajes: 486
Antigüedad: 13 años, 1 mes
Puntos: 9
duplicar div y efectos

hola amigos
encontre este codigo en internet para reemplazar una imagen con efecto dentro de un div pero cuando intento duplicarlo, porque quiero tener 10 div mas con la propiedad float:left; todo se distorsiona

desde ya
muchas gracias por su orientacion

Código CSS:
Ver original
  1. <style type="text/css">
  2. #swop1, #swop2 { position:absolute; top:50px; left:50px; width:150px; height:150px; }
  3. #swop1 { background:url('1.jpg'); }
  4. #swop2 { background:url('2.jpg'); display:none; }
  5. </style>
  6.  
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  8. <script type="text/javascript">
  9.     $(document).ready(function()
  10.         {
  11.         $('#swop1').mouseover(function(){ $('#swop2').fadeIn(500)});
  12.         $('#swop2').mouseout(function(){ $('#swop2').fadeOut(500)});
  13.             });
  14. </script>
  15.  
  16. </head>
  17. <body>
  18.  
  19. <div id="swop1"></div>
  20. <div id="swop2"></div>