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