jQuery icon Dock plug-in


 

jQuery icon Dock plug-in

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

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

Ads