Adım 1 : Aşağıdaki kodu <head> </head> tagları arasına yerleştirin
<!-- http://mintik.com kod baslangici --> <!DOCTYPE html PUBLIC > <head> <script type="text/javascript" src="http://mintik.com/wp-content/uploads/2011/03/jquery-1.2.6.min_.js"></script> <script src="http://mintik.com/wp-content/uploads/2011/05/jquery.easing.1.3.js" type="text/javascript"></script> <script type="text/javascript"><!-- $(document).ready(function() { $('.zoom_menu_resim_mintik_com').hover( function() { //mintik.com $(this).find('img').animate({width:100,// Saga uzama ayari height:100,//A_agi uzama ayari marginTop:-20,// Yukari uzama ayari marginLeft:-25},//Sola uzama ayari {queue:false,duration:500 }); //mintik.com }, function() { $(this).find('img').animate({width:50, height:50, marginTop:0, marginLeft:0},{queue:false,duration:500}); }); }); //--> </script> <style type="text/css" media="screen"><!-- .zoom_menu_ana_cerceve_mintik_com {width: 990px;} .zoom_menu_resim_mintik_com {width:25px; height:23px; margin:27px; float:left; } --></style> <title>jQuery image zoom | büyüyen menü | mintik.com</title> </head> <!-- http://mintik.com kod sonu -->
Adım 2 :
Menünün duracağı yere aşağıdaki kodu yerleştirin
<!-- http://mintik.com kod baslangici --> <body> <div align="center"> <div class="zoom_menu_ana_cerceve_mintik_com"> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/delicious.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/digg.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/facebook.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/furl.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/google.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/newsvine.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/reddit.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/stumbleupon.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/technorati.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/twitter.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/windowslive.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/yahoo.gif" height="50" width="50"></img></a> </div> </div> </div> </body> </html> <!-- http://mintik.com kod sonu -->
Adım 3 : Kodların birleştirilmiş hali
<!-- http://mintik.com kod baslangici --> <!DOCTYPE html PUBLIC > <head> <script type="text/javascript" src="http://mintik.com/wp-content/uploads/2011/03/jquery-1.2.6.min_.js"></script> <script src="http://mintik.com/wp-content/uploads/2011/05/jquery.easing.1.3.js" type="text/javascript"></script> <script type="text/javascript"><!-- $(document).ready(function() { $('.zoom_menu_resim_mintik_com').hover( function() { //mintik.com $(this).find('img').animate({width:100,// Saga uzama ayari height:100,//A_agi uzama ayari marginTop:-20,// Yukari uzama ayari marginLeft:-25},//Sola uzama ayari {queue:false,duration:500 }); //mintik.com }, function() { $(this).find('img').animate({width:50, height:50, marginTop:0, marginLeft:0},{queue:false,duration:500}); }); }); //--> </script> <style type="text/css" media="screen"><!-- .zoom_menu_ana_cerceve_mintik_com {width: 990px;} .zoom_menu_resim_mintik_com {width:25px; height:23px; margin:27px; float:left; } --></style> <title>jQuery image zoom | büyüyen menü | mintik.com</title> </head> <body> <div align="center"> <div class="zoom_menu_ana_cerceve_mintik_com"> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/delicious.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/digg.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/facebook.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/furl.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/google.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/newsvine.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/reddit.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/stumbleupon.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/technorati.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/twitter.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/windowslive.gif" height="50" width="50"></img></a> </div> <div class="zoom_menu_resim_mintik_com"> <a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/yahoo.gif" height="50" width="50"></img></a> </div> </div> </div> </body> </html> <!-- http://mintik.com kod sonu -->