un simple efecto con jquery

jhonatanAsm · 24 Marzo 2012, 18:10 PM

Código (html4strict) [Seleccionar]


<html>
<head>
<style>

#imagen{
 position:absolute;
 border:10px solid yellow;
 width:400px;
 height:300px;
 list-style-type:none;
 border-radius:15px;

}

ul li{
list-style-type:none;

}

#imagen ul li img #foto{
 border:10px solid yellow;
 width:300px;
 height:200px;
 list-style-type:none;
 border-radius:15px;
}


</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script>

$(document).ready(function(){
 
 var img =$('#link ul li').attr('dir');
 $('#imagen ul li img').attr('src',img);
 $('#imagen ul li img').css({
   'position':'absolute',
   'width':'400px',
   'height':'300px',
   'margin-left':'-40px',
   'margin-top':'-18px'
   
  });
 
 $('#link ul li').mouseover(function(){
 
  var img = $(this).attr('dir');
  $('#imagen ul li img').attr('src',img);
  $('#imagen ul li img').css({
   'width':'400px',
   'height':'300px'
  });
 });

});

</script>
</head>
<body>

<div id="marco">
 
 <div id="link">
  <ul>
   <li dir="http://blogs.peru21.pe/huevinenlaoficina/gato-pollo.jpg">hola</li>
   
   <li dir="http://2.bp.blogspot.com/_jt2ErO_S1CY/TK9pX6F91dI/AAAAAAAAAHM/jB0sANA8kAU/s1600/bsd-windows-linux.jpg">ruta</li>
   
   <li dir="http://t0.gstatic.com/images?q=tbn:ANd9GcQwP4o37X2gmTIlC9wx2QkWWTt7Qf5Z0HgsuaB8kw5-ECeketjMDsU8ryDY">imagen 3</li>
   
   <li dir="http://blogs.peru21.pe/huevinenlaoficina/gato-pollo.jpg">hola</li>
   
   <li dir="http://2.bp.blogspot.com/_jt2ErO_S1CY/TK9pX6F91dI/AAAAAAAAAHM/jB0sANA8kAU/s1600/bsd-windows-linux.jpg">ruta</li>
   
   <li dir="http://t0.gstatic.com/images?q=tbn:ANd9GcQwP4o37X2gmTIlC9wx2QkWWTt7Qf5Z0HgsuaB8kw5-ECeketjMDsU8ryDY">imagen 3</li>
   
  </ul>
 </div>
 
 <div id="imagen">
  <ul>
   <li><img id="foto"/>imagen1</li>
  </ul>
 </div>
 
</div>
</body>
</html>

Spider-Net · 24 Marzo 2012, 18:44 PM

Hola me llamo Geshi y sirvo para colorear los códigos y que la gente se digne a leerlos:

De nada.

jhonatanAsm · 24 Marzo 2012, 23:43 PM

gracias men, no lo conocía a ese tal geshi xD, parece un camaleón =) . salu2.

Test Foro de elhacker.net SMF 2.1

un simple efecto con jquery

jhonatanAsm

Spider-Net

jhonatanAsm