Imprimir Página - un simple efecto con jquery

Código
<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>
Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: jhonatanAsm en 24 Marzo 2012, 18:10 pm
