This section is about the icon Dock plug in of jQuery.
This section is about the icon Dock plug in of jQuery.This section is about the icon Dock plug in of jQuery. The icon Dock is a jQuery JavaScript library plug-in that allows you to create a menu on your web like the Mac OS X operating system dock effect one. The we are using here is "jquery.dock-0.8b.js". For this , you have to save images in two different sizes , one is small & other is large. And also you have to save it in same folder.
icondock.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>iconDock 0.8b Example</title> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.dock-0.8b.js"></script> <script type="text/javascript"> <!-- var confDock2 = { iconMinSide : 20, iconMaxSide : 100, distAttDock : 100, coefAttDock : 3, veloOutDock : 500, valign: 'middle' } jQuery(function() { jQuery("#BarraPersonalitzada2").addDockEffect(confDock2); }); --> </script> </head> <body> <div id="container" style="margin:0 auto;"> <div id="BarraPersonalitzada2"> <a href="http://www.newstrackindia.com/" name="Alertes_name" title="Google alertes"> <img src="icon/alerts_35.gif" alt="Campana_alt" border="0" /> </a> <a href="http://www.newstrackindia.com/" name="Escriptori_name" title="Google Escriptori"> <img src="icon/desktop_35.gif" alt="Escriptori_alt" border="0" /> </a> <a href="http://www.newstrackindia.com/" name="Compres_name" title="Google compres"> <img src="icon/froogle_35.gif" alt="Froogle_alt" border="0" /> </a> <a href="http://www.newstrackindia.com/" name="GMail_name" title="Google mail"> <img src="icon/gmail_35.gif" alt="Gmail_alt" border="0" /> </a> <a href="http://www.newstrackindia.com/" name="Grups_name" title="Google grups"> <img src="icon/groups_35.gif" alt="Grups_alt" border="0" /> </a> <a href="http://www.newstrackindia.com/" name="Linux_name" title="Linux"> <img src="icon/special_35.gif" alt="Especial_alt" border="0" /> </a> <a href="http://www.newstrackindia.com/" name="Alertes_name" title="Google alertes"> <img src="icon/alerts_35.gif" alt="Campana_alt" border="0" /> </a> <a href="http://www.newstrackindia.com/" name="Escriptori_name" title="Google Escriptori"> <img src="icon/desktop_35.gif" alt="Escriptori_alt" border="0" /> </a> <a href="http://www.newstrackindia.com/" name="Escriptori_name" title="Google Escriptori"> <img src="icon/desktop_35.gif" alt="Escriptori_alt" border="0" /> </a> <a href="http://www.newstrackindia.com/" name="Alertes_name" title="Google alertes"> <img src="icon/alerts_35.gif" alt="Campana_alt" border="0" /> </a> </div> </div> </body> </html> |
OUTPUT
When you hover on any icon :