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=3 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 <HEAD></HEAD> HTML tag:
<pre>
<HEAD>
<script language="JavaScript1.3" src="js/euDock.2.0.js"></script>
<script language="JavaScript1.3" src="js/euDock.Image.js"></script>
</HEAD>
<pre>
<script>
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"});
</script>
</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>
<script>
/*
* 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
*/
</script>
</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><a href='http://eudock.jules.it'>
<img src='http://eudock.jules.it/littlEuDock.jpg' border=0></a></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.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>
eudock2.0.zip( 352 k)Related examples in the same category