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> $(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> </ul> </div> <div id="imagen"> <ul> </ul> </div> </div> </body> </html>