Share on Google+Share on Google+

jQuery icon Dock plug-in

Advertisement
This section is about the icon Dock plug in of jQuery.

jQuery icon Dock plug-in

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 :

Download Source Code

Click here to see demo

Advertisements

Advertisement

Posted on: August 10, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.