Not So Simple Fading Images euDock 2.0 : Dock : Ajax Layer JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Dock »

 

Not So Simple Fading Images euDock 2.0




<html>
</head>
<title>euDock 2.0 examples</title>
<link type="image/x-icon" href="iconsEuDock/euDock.ico" rel="shortcut icon">

<script language="JavaScript1.3" src="js/euDock.2.0.js"></script>
<script language="JavaScript1.3" src="js/euDock.Image.js"></script>
</head>
<body>
<center>
<table cellpadding=style='border:1px solid #8899bb;'>
<tr><td style="border:1px solid #8899bb;">
<center><b>Not So Simple Fading Images euDock 2.0</b></center>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center><b>To make this possible you must write inside your page:</b></center>
<br>Place inside your &lt;HEAD&gt;&lt;/HEAD&gt; HTML tag:
<pre>
&lt;HEAD&gt;
   &lt;script language="JavaScript1.3" src="js/euDock.2.0.js"&gt;&lt;/script&gt;
   &lt;script language="JavaScript1.3" src="js/euDock.Image.js"&gt;&lt;/script&gt;
&lt;/HEAD&gt;
<pre>
&lt;script&gt;
   euEnv.imageBasePath="js/";

   var dock = new euDock();
   
   dock.setAnimation(euMOUSE,0.3);
   
      //added from previous (simple) tutorial<b>
   dock.animFading = euRELATIVE;</b>
   
   dock.setBar({
        left      :{euImage:{image:"barImages/dockBg-l.png"}},
        horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},
        right     :{euImage:{image:"barImages/dockBg-r.png"}}
     });
   
   dock.setIconsOffset(2);
       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-red.png"}}),
                {link:"http://eudock.jules.it"});       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-red.png"}}),
                {link:"http://eudock.jules.it"});       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-brown.png"}}),
                {link:"http://eudock.jules.it"});        
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-gold.png"}}),
                {link:"http://eudock.jules.it",
                 fadingStep:0.1})
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/euDock-red.png"}},
                     {euImage:{image:"iconsEuDock/euDock-brown.png"}},
                     {euImage:{image:"iconsEuDock/euDock-gold.png"}},
                     {euImage:{image:"iconsEuDock/euDock-green.png"}},
                     {euImage:{image:"iconsEuDock/euDock-blue.png"}},
                     {euImage:{image:"iconsEuDock/euDock-purple.png"}}),
                {link:"http://eudock.jules.it",
                 fadingStep:0.02,
                 fadingType:euOPAQUE});
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-purple.png"}},
                     {euImage:{image:"iconsEuDock/E.png"}}),
                {link:"http://eudock.jules.it",
                 fadingStep:0.1,
                 fadingType:euFIXED});
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/euDock-red.png"}},
                     {euImage:{image:"iconsEuDock/euDock-brown.png"}},
                     {euImage:{image:"iconsEuDock/euDock-gold.png"}},
                     {euImage:{image:"iconsEuDock/euDock-green.png"}},
                     {euImage:{image:"iconsEuDock/euDock-blue.png"}},
                     {euImage:{image:"iconsEuDock/euDock-purple.png"}}),
                {link:"http://eudock.jules.it",
                 fadingStep:0.02,
                 fadingType:euTRANSPARENT});                                     
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-green.png"}}),
                {link:"http://eudock.jules.it",
                 fadingStep:0.1});       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-blue.png"}}),
                {link:"http://eudock.jules.it"});       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-purple.png"}}),
                {link:"http://eudock.jules.it"});       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-purple.png"}}),
                {link:"http://eudock.jules.it"});
&lt;/script&gt;
</pre>

</td></tr>
<tr><td style="border:1px solid #8899bb;">

<center><b>MMMMM... It's a better idea to explain these functions:</b></center>
<pre>
&lt;script&gt;
      /*
       * This is useful for Internet Explorer PNG compatibility
       * "js/" is the euDock javascript basePath
       */<b>
   euEnv.imageBasePath="js/";</b>
   
      //In variable (dock) now there is an euDock object<b>
   var dock = new euDock();</b>   
   
      /*
       * (euDock object).setAnimation(type,venusHillWidth)
       *
       * align euDock to the screen borders
       * type           : (euMOUSE,euICON)
       *                : euMOUSE : the animation is relative to the mouse position
       *                : euICON  : the animation is relative to the mouse Over Icon position
       *
       * venusHillWidth : the distance of icons (animated) from the mouse pointer
       *                : if -type- is:
       *                : euMOUSE : the value must be between (0 and 1) 
       *                          : (1 = all icons are animated)
       *                          : (0.5) (default) the hill is about 50% of the bar
       *                          : (0) only mouse over icon is zoomed
       *                : euICON  : the value must be numeric (0,1,2,3,4,5,...)
       *                          : is the number of icons zoomed near mouseOverIcon
       */<b>
   dock.setAnimation(euMOUSE,0.3);</b>
   
      /*
       * (euDock object).animFading = (type)
       *
       * type           : (euABSOLUTE,euRELATIVE)
       *                : (default) euABSOLUTE
       *                : euABSOLUTE  : only one icon start to fading
       *                : euRELATIVE  : all the icons near mouse position (venusHillWidth) 
       *                              : start to fading
       *                              :(see the previous function for venusHillWidth)
       */<b>   
   dock.animFading = euRELATIVE;</b>   
   
      /*
       * To define (unnecessary) the background Dock Bar:
       *
       * (euDock object).setBar({
       *        left      :[-(object definition for left background bar icon)-],
       *        horizontal:[-(object definition for center horizontal background bar icon)-],
       *        right     :[-(object definition for right background bar icon)-]
       *      });                                                      
       *
       * euImage is the euImage Object inside the "euDock.Image.js" script
       * the common constructor is:
       *
       *    {euImage:{image:[-(image name)-]}}
       */<b>
   dock.setBar({
        left      :{euImage:{image:"barImages/dockBg-l.png"}},
        horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},
        right     :{euImage:{image:"barImages/dockBg-r.png"}}
     });</b>

      /*
       * (unnecessary)
       *
       * (euDock object).setIconsOffset(offset);
       *
       * offset:the distance between base align bar and the base align icons
       * default is 0
       */<b>
   dock.setIconsOffset(2);</b>

      /*
       * (unnecessary)(if you want to see nothing of course)
       *
       * (euDock object).addIcon(arrayOfObjects,iconParameters);
       *
       * arrayOfObjects : array of fading objects
       *
       * iconParameters : "link"       : is the url where you want to go
       *
       *                : "fadingStep" : is the percent of fading icon value
       *                               : icon fading goes from 0 (first object visible (euDock-red.png)) 
       *                               :                    to 1 (last  object visible (euDock-purple.png))
       *                               : fadingStep=0.02
       *                               :       There was 50 frames to make icon fading goes from 0 to 1
       *                               :       50 = (1/0.02)
       *                               :
       *                               : (default) = (0.5/[-number of fading objects-])
       *                               :       About 2 frames for fading objects;
       *
       *                : "fadingType" : (euTRANSPARENT,euOPAQUE,euFIXED)
       *                               : euTRANSPARENT (default)
       *                               :       (Mathematical interpolation of transition)
       *                               :        Background can be visible inside transition
       *                               : euOPAQUE
       *                               :        Background is not more visible inside transition
       *                               :        But some alpha elements (like shadows)
       *                               :        in the images can flicker
       *                               : euFIXED
       *                               :        Background elements doesn't disappear
       */<b>
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/euDock-red.png"}},
                     {euImage:{image:"iconsEuDock/euDock-brown.png"}},
                     {euImage:{image:"iconsEuDock/euDock-gold.png"}},
                     {euImage:{image:"iconsEuDock/euDock-green.png"}},
                     {euImage:{image:"iconsEuDock/euDock-blue.png"}},
                     {euImage:{image:"iconsEuDock/euDock-purple.png"}}),
                {link:"http://eudock.jules.it",
                 fadingStep:0.02,
                 fadingType:euTRANSPARENT});</b>
   
      /*
       * Repeat the last command if you want more icons
       */
&lt;/script&gt;
</pre>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center><b>REMEMBER</b><br>Don't forget to put in your page:
<table cellpadding=5>
<tr><td style='border:1px solid #8899bb;'>
<pre><b>&lt;a href='http://eudock.jules.it'&gt;
&lt;img src='http://eudock.jules.it/littlEuDock.jpg' border=0&gt;&lt;/a&gt;</b></pre>
</td><td>
<a href='http://eudock.jules.it'><img src='littlEuDock.jpg' border=0>
</td></tr>
</table>
!!!If you don't like (of coursea personal Macumba!!!
</center>
</td></tr>
</table>
<a href='index.html'><b>RETURN TO INDEX</b></a>
</center>
<a href='http://eudock.jules.it'>
<img src='littlEuDock.jpg' border=0></a>
</body>
</html>

<script>
   euEnv.imageBasePath="js/";

   var dock = new euDock();
   
   dock.setAnimation(euMOUSE,0.3);
   
   dock.animFading = euRELATIVE;   
   
   dock.setBar({
        left      :{euImage:{image:"barImages/dockBg-l.png"}},
        horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},
        right     :{euImage:{image:"barImages/dockBg-r.png"}}
     });
   
   dock.setIconsOffset(2);
       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-red.png"}}),
                {link:"http://eudock.jules.it"});       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-red.png"}}),
                {link:"http://eudock.jules.it"});       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-brown.png"}}),
                {link:"http://eudock.jules.it"});        
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-gold.png"}}),
                {link:"http://eudock.jules.it",
                 fadingStep:0.1})
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/euDock-red.png"}},
                     {euImage:{image:"iconsEuDock/euDock-brown.png"}},
                     {euImage:{image:"iconsEuDock/euDock-gold.png"}},
                     {euImage:{image:"iconsEuDock/euDock-green.png"}},
                     {euImage:{image:"iconsEuDock/euDock-blue.png"}},
                     {euImage:{image:"iconsEuDock/euDock-purple.png"}}),
                {link:"http://eudock.jules.it",
                 fadingStep:0.02,
                 fadingType:euOPAQUE});
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-purple.png"}},
                     {euImage:{image:"iconsEuDock/E.png"}}),
                {link:"http://eudock.jules.it",
                 fadingStep:0.1,
                 fadingType:euFIXED});
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/euDock-red.png"}},
                     {euImage:{image:"iconsEuDock/euDock-brown.png"}},
                     {euImage:{image:"iconsEuDock/euDock-gold.png"}},
                     {euImage:{image:"iconsEuDock/euDock-green.png"}},
                     {euImage:{image:"iconsEuDock/euDock-blue.png"}},
                     {euImage:{image:"iconsEuDock/euDock-purple.png"}}),
                {link:"http://eudock.jules.it",
                 fadingStep:0.02,
                 fadingType:euTRANSPARENT});                                     
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-green.png"}}),
                {link:"http://eudock.jules.it",
                 fadingStep:0.1});       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-blue.png"}}),
                {link:"http://eudock.jules.it"});       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-purple.png"}}),
                {link:"http://eudock.jules.it"});       
   dock.addIcon(new Array(
                     {euImage:{image:"iconsEuDock/cube.png"}},
                     {euImage:{image:"iconsEuDock/euDock-purple.png"}}),
                {link:"http://eudock.jules.it"});       

</script>
           
       

Download : Download nav_eudock2.0.zip nav_eudock2.0.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Ajax Layer
» Dock