euDock 2.0 examples
Not So Simple euDock 2.0
To make this possible you must write inside your page:
Place inside your <HEAD></HEAD> HTML tag:
<HEAD>
<script language="JavaScript1.3" src="js/euDock.2.0.js"></script>
<script language="JavaScript1.3" src="js/euDock.Image.js"></script>
</HEAD>
<script>
euEnv.imageBasePath="js/";
var dock = new euDock();
//added from previous (simple fading images) tutorial
dock.setAnimation(euMOUSE,0.3);
//added from previous (simple) tutorial
dock.setScreenAlign(euLEFT,0);
dock.setBar({
top :{euImage:{image:"barImages/dockBg-u.png"}},
vertical :{euImage:{image:"barImages/dockBg-c-v.gif"}},
bottom :{euImage:{image:"barImages/dockBg-d.png"}},
left :{euImage:{image:"barImages/dockBg-l.png"}},
horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},
right :{euImage:{image:"barImages/dockBg-r.png"}}
});
dock.setIconsOffset(1);
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
</script>
MMMMM... It's a better idea to explain these functions:
<script>
/*
* This is useful for Internet Explorer PNG compatibility
* "js/" is the euDock javascript basePath
*/
euEnv.imageBasePath="js/";
//In variable (dock) now there is an euDock object
var dock = new euDock();
/*
* (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
*/
dock.setAnimation(euMOUSE,0.3);
/*
* (euDock object).setScreenAlign(align,offset)
*
* align euDock to the screen borders
* align : (euUP,euDOWN,euLEFT,euRIGHT)
* offset : the distance between screen border and euDock
*/
dock.setScreenAlign(euLEFT,0);
/*
* To define (unnecessary) the background Dock Bar:
*
* (euDock object).setBar({
* top :[-(object definition for top background bar icon)-],
* vertical :[-(object definition for center vertical background bar icon)-],
* bottom :[-(object definition for right bottom bar icon)-],
* 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)-]
*
* (In this case -left- -horizontal- -right- parameters are not useful
* but you can use them without problems or if you want a mobile bar)
*
* euImage is the euImage Object inside the "euDock.Image.js" script
* the common constructor is:
*
* {euImage:{image:[-(image name)-]}}
*/
dock.setBar({
top :{euImage:{image:"barImages/dockBg-u.png"}},
vertical :{euImage:{image:"barImages/dockBg-c-v.gif"}},
bottom :{euImage:{image:"barImages/dockBg-d.png"}},
left :{euImage:{image:"barImages/dockBg-l.png"}},
horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},
right :{euImage:{image:"barImages/dockBg-r.png"}}
});
/*
* (unnecessary)
*
* (euDock object).setIconsOffset(offset);
*
* offset:the distance between base align bar and the base align icons
* default is 0
*/
dock.setIconsOffset(1);
/*
* (unnecessary)(if you want to see nothing of course)
*
* (euDock object).addIcon(arrayOfObjects,iconParameters);
*
* arrayOfObjects : in this case there is an euImage array of 1 element
* iconParameters : "link" is the url where you want to go
*/
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});
/*
* Repeat the last command if you want more icons
*/
</script>
REMEMBER
Don't forget to put in your page:
<a href='http://eudock.jules.it'>
<img src='http://eudock.jules.it/littlEuDock.jpg' border=0></a>
!!!If you don't like (of course) a personal Macumba!!!
RETURN TO INDEX