Simple Fading Images euDock 2.0 : Dock « Ajax Layer






<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=3 style='border:1px solid #8899bb;'>

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

<center><b>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);

   

   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>   

   

      /*

       * 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 course) a 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.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>
Simple Fading Images euDock 2.0 : Dock « Ajax Layer « JavaScript DHTML
