ciao Michele questa e' la pagina
codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>PHOTODEPARTMENTS Photography agency </title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="generator" content="HAPedit 3.1"> <meta name="description" content=""> <link REL="shortcut icon" href="favicon.ico" type="image/x-icon"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> <script type="text/javascript" src="includes/javascript.js"> </script> <link href="style/format.css" rel="stylesheet" type="text/css"> <link href="style/style.css" rel="stylesheet" type="text/css"> <!--[if lt IE 8]> <style type="text/css"> li a {display:inline-block;} li a {display:block;} </style> <![endif]--> <script src="includes/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { //move the image in pixel var move = 0; //zoom percentage, 1.2 =120% var zoom = 1.0; //On mouse over those thumbnail $('.item').hover(function() { //Set the width and height according to the zoom percentage width = $('.item').width() * zoom; height = $('.item').height() * zoom; //Move and zoom the image //$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200}); //Display the caption $(this).find('div.caption').stop(false,true).fadeIn(200); }, function() { //Reset the image //$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100}); //Hide the caption $(this).find('div.caption').stop(false,true).fadeOut(200); }); }); </script> <style type="text/css"> .item { width:142px; height:190px; display: block; padding: 0px 0px 15px 0px; margin-left:10px; /* required to hide the image after resized */ overflow:hidden; /* for child absolute position */ position:relative; /* display div in line */ float:left; } .item .caption { width:142px; height:190px; background:#000; color:#fff; /* fix it at the bottom */ position:absolute; left:0; /* hide it by default */ display:none; /* opacity setting */ filter:alpha(opacity=80); /* ie */ -moz-opacity:0.8; /* old mozilla browser like netscape */ -khtml-opacity: 0.8; /* for really really old safari */ opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */ } .item .caption a { text-decoration:none; color:#fff; font-size:16px; margin-top:40px; /* add spacing and make the whole row clickable*/ padding:15px; display:block; } .item .caption p { padding:5px; margin:0; font-size:10px; } img { border:0; /* allow javascript moves the img position*/ position:absolute; } .clear { clear:both; } </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"> <script type="text/javascript"> $(function() { $('a[@rel*=lightbox]').lightBox(); }); </script> </head> <body> <div id="container"> <div id="wrapper"> <div id="content"> <div class="cont"> <div class="item"> <div class="nomef"> [img]fotog_1/00.jpg[/img] </div> </div> <div class="item"> [img]fotog_1/01.jpg[/img] <div class="caption"> Asniere </div> </div> <div class="item"> [img]fotog_1/02.jpg[/img] <div class="caption"> Axel </div> </div> <div class="item"> [img]fotog_1/03.jpg[/img] <div class="caption"> Beatrice </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Chantilly </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Cortona </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Di Rosa </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Didierg </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Dominic </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Gitte dk </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Gitte Dordogne </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Kamilla </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Kira </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Mikala </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Orleans </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Provence </div> </div> <div class="item"> [img]fotog_1/02t.jpg[/img] <div class="caption"> Trastevere </div> </div> </div> </div> <div id="navigation"> <div id="header">[img]img/logo.jpg[/img] </div> <div id="lang"> it | en </div> <div id="menu1"> <div>home</div> <div class="accordionButton">fotografi</div> <div class="accordionContent"> ALAIN POTIGNON MARIO ROSSI MARIO ROSSI MARIO ROSSI MARIO ROSSI MARIO ROSSI MARIO ROSSI MARIO ROSSI MARIO ROSSI </div> <div>about</div> <div>news</div> <div>clienti e pubblicazioni</div> </div> </div> <div id="footer"></div> </div> </div> </body> </html>
Rispondi quotando