JavaScript DHTML/Ajax Layer/Dock
Содержание
Align Tutorial 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>
<br><br><br><br>
<table id="tableAlign" cellspacing=5 style="width:300;height:200;border:1px solid #8899bb;">
<tr><td id="cellAlign" style="border:1px solid #8899bb;"><center>This is a cell</center>
</td></tr>
</table>
<br>
<table cellpadding=3 style="border:1px solid #8899bb;">
<tr><td style="border:1px solid #8899bb;">
<center><b>Align Tutorial euDock 2.0</b></center>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center><b>Align Functions:</b></center>
I gues that euDock creation is not a problem (is explained in the previous tutorial).<br><br>
After the creation of an euDock object, you can align it to the screen or<br>
to an HTML object or to a fixed position (a little example is on the top left of this page)
</td></tr>
<tr><td style="border:1px solid #8899bb;"><b>Align to screen:</b>
<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>
// Instance your euDock object<b>
var dock = new euDock();</b>
/*
* (euDock object).setScreenAlign(align,offset)
*
* align euDock to the screen borders
* align : (euUP,euDOWN,euLEFT,euRIGHT)
* offset : the distance between screen border and euDock
*/<b>
dock.setScreenAlign(euRIGHT,3);</b>
</script>
</pre>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<b>Align an HTML object:</b>
<pre>
<script>
// Instance your euDock object<b>
var dock = new euDock();</b>
/*
* (euDock object).setObjectAlign(objectID,objectAlign,offset,euDockPosition)
*
* align euDock to an HTML object
* objectID : the id of the object to be retrieve with the javascript function
* : document.getElementById(objectID);
*
* objectAlign : (euUP,euDOWN,euLEFT,euRIGHT)
* : Align to the middle (TOP,DOWN,LEFT,RIGHT) of the object
*
* offset : The distance from HTML object
*
* euDockPosition : (euUP,euDOWN,euLEFT,euRIGHT)
* : put euDock on the (TOP,DOWN,LEFT,RIGHT)
* : of the middle edge position of the object
* : (If you don"t understand see the sources)
*/<b>
dock.setObjectAlign("tableAlign",euLEFT,10,euLEFT);</b>
</script>
</pre>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<b>Align to a fixed position:</b>
<pre>
<script>
// Instance your euDock object<b>
var dock = new euDock();</b>
/*
* (euDock object).setPointAlign(x,y,euDockPosition)
*
* align euDock to a fixed position
* [x,y] : obvious
* euDockPosition : (euUP,euDOWN,euLEFT,euRIGHT)
* : put euDock on the (TOP,DOWN,LEFT,RIGHT)
* : of the x,y point
*/<b>
dock.setPointAlign(150,50,euDOWN);</b>
</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_1 = new euDock();
dock_1.setScreenAlign(euLEFT,0);
dock_1.setBar({top:{euImage:{image:"barImages/dockBg-u.png"}},vertical:{euImage:{image:"barImages/dockBg-c-v.gif"}},bottom:{euImage:{image:"barImages/dockBg-d.png"}}});
dock_1.setIconsOffset(2);
dock_1.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_1.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_1.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_2 = new euDock();
dock_2.setScreenAlign(euRIGHT,3);
dock_2.setBar({top:{euImage:{image:"barImages/dockBg-u.png"}},vertical:{euImage:{image:"barImages/dockBg-c-v.gif"}},bottom:{euImage:{image:"barImages/dockBg-d.png"}}});
dock_2.setIconsOffset(2);
dock_2.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_2.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_2.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_3 = new euDock();
dock_3.setScreenAlign(euUP,0);
dock_3.setBar({left:{euImage:{image:"barImages/dockBg-l.png"}},horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},right:{euImage:{image:"barImages/dockBg-r.png"}}});
dock_3.setIconsOffset(2);
dock_3.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_3.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_3.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_4 = new euDock();
dock_4.setScreenAlign(euDOWN,0);
dock_4.setBar({left:{euImage:{image:"barImages/dockBg-l.png"}},horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},right:{euImage:{image:"barImages/dockBg-r.png"}}});
dock_4.setIconsOffset(2);
dock_4.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_4.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_4.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_5 = new euDock();
dock_5.setObjectAlign("cellAlign",euDOWN,0,euUP);
dock_5.setBar({left:{euImage:{image:"barImages/dockBg-l.png"}},horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},right:{euImage:{image:"barImages/dockBg-r.png"}}});
dock_5.setIconsOffset(2);
dock_5.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_5.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_5.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_6 = new euDock();
dock_6.setObjectAlign("tableAlign",euRIGHT,0,euRIGHT);
dock_6.setBar({top:{euImage:{image:"barImages/dockBg-u.png"}},vertical:{euImage:{image:"barImages/dockBg-c-v.gif"}},bottom:{euImage:{image:"barImages/dockBg-d.png"}}});
dock_6.setIconsOffset(2);
dock_6.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_6.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_6.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_7 = new euDock();
dock_7.setObjectAlign("tableAlign",euLEFT,10,euLEFT);
dock_7.setBar({top:{euImage:{image:"barImages/dockBg-u.png"}},vertical:{euImage:{image:"barImages/dockBg-c-v.gif"}},bottom:{euImage:{image:"barImages/dockBg-d.png"}}});
dock_7.setIconsOffset(2);
dock_7.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_7.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_7.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_8 = new euDock();
dock_8.setPointAlign(150,50,euDOWN);
dock_8.setBar({left:{euImage:{image:"barImages/dockBg-l.png"}},horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},right:{euImage:{image:"barImages/dockBg-r.png"}}});
dock_8.setIconsOffset(2);
dock_8.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_8.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_8.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
</script>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/eudock2.0.zip">eudock2.0.zip( 352 k)</a>
euDock 2.0 examples
<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>
<script language="JavaScript1.3" src="js/euDock.Ghost.js"></script>
<script language="JavaScript1.3" src="js/euDock.Blank.js"></script>
<script language="JavaScript1.3" src="js/euDock.Label.js"></script>
</head>
<body>
<center>
<table cellpadding=3 style="border:1px solid #8899bb;">
<tr><td style="border:1px solid #8899bb;">
<center><b>euDock 2.0 Objects Tutorial</b></center>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center><b>euImage Object:</b></center>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<br>Add inside your <HEAD></HEAD> HTML tag:
<pre>
<HEAD>
...
<script language="JavaScript1.3" src="js/euDock.Image.js"></script>
...
</HEAD>
</pre>
Object Definition:
<pre>
/*
* euImage is the euImage Object inside the "euDock.Image.js" script
* the common constructor is:
*
* {euImage:{image : [-(image name)-],
* PngObjIE : [-(NoFadingIE_PNG object)-]}}
*
* image : image name
* PngObjIE : (unnecessary)
* : This parameter is useful if you use a PNG image in Internet
* : Explorer and you are sure that this image will not fade to another.
* : For example the PNG images applied to the dock bar
* : or the PNG images used in icons with only 1 image
* : or the first PNG image in the icons with (fadingType:euFIXED)
* : parameter set.
* : It may be complex but the performances are improved
* : with PNGs on Internet Explorer
* :
* : euImageNoFadingIE_PNG : is the object used in this case
* :
* : (unnecessary) with gif,jpg,(PNGs without alpha) images
* : or with fading images
*/<b>
{euImage : {image : "iconsEuDock/euDock-red.png",
PngObjIE : euImageNoFadingIE_PNG}}</b>
</pre>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center><b>euBlank Object:</b></center>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<br>Add inside your <HEAD></HEAD> HTML tag:
<pre>
<HEAD>
...
<script language="JavaScript1.3" src="js/euDock.Blank.js"></script>
...
</HEAD>
</pre>
Object Definition:
<pre>
/*
* euBlank is the euBlank Object inside the "euDock.Blank.js" script
* the common constructor is:
*
* {euBlank:{width : [-width-],
* height : [-height-]}}
*
* width,height : obvious
*
* instead to use blank gif images, you can use this
* object to improve performances
* (the browser doesn"t consider his hidden dimension)
*/<b>
{euBlank:{width:100,height:100}</b>
</pre>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center><b>euGhost Object:</b></center>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<br>Add inside your <HEAD></HEAD> HTML tag:
<pre>
<HEAD>
...
<script language="JavaScript1.3" src="js/euDock.Image.js"></script>
<script language="JavaScript1.3" src="js/euDock.Ghost.js"></script>
...
</HEAD>
</pre>
euGhost need euImage object (inside "euDock.Image.js" script) render engine<br><br>
Object Definition:
<pre>
/*
* euGhost is the euGhost Object inside the "euDock.Ghost.js" script
* the common constructor is:
*
* {euGhost:{
* ghost : [-Ghost Image Name-],
* eyeball : [-Eyeball Image Name-],
* eyespot_1 : [-Left Spot Image Name-],
* eyespot_2 : [-Right Spot Image Name-],
* shadow : [-Shadow Image Name-],
* shadowPos : {x:[-X Pos-],y:[-Y Pos-]},
* spotCoord1: {x:[-X Pos-],y:[-Y Pos-],rad:[-Radius-]},
* spotCoord2: {x:[-X Pos-],y:[-Y Pos-],rad:[-Radius-]},
* PngObjIE : [-(NoFadingIE_PNG object)-]
* }}
*
* ghost , eyeball , eyespot_1 , eyespot_2 , shadow
* : these are the images of the ghost object
*
* shadowPos : x and y relative position of the shadow (eyeShadow)
* (shadow and shadowPos are not necessary)
* (if euGhost doesn"t fading, the
* eye shadow can be unuseful)
*
* spotCoord1 : x and y relative position of the center of
* spotCoord2 : left and right eyeball
* : rad is the radius in pixel from the center
*
* PngObjIE : euGhost use euImage render Engine and can support
* : this parameter descripted before.
* : (in this page there is an euGhost [not fading] object in the bar)
*
* euGhost doesn"t completely disappear
* eyeball, shadow and eyespot(1-2) are always visible
* these are euImage objects with:
* (PngObjIE : euImageNoFadingIE_PNG)
* parameter set.
*/<b>
{euGhost:{
ghost : "ghostImages/ghost_red-1.png",
eyeball : "ghostImages/eyes.png",
eyespot_1 : "ghostImages/eye-spot-1.png",
eyespot_2 : "ghostImages/eye-spot-2.png",
shadow : "ghostImages/eyes-shadow.png",
shadowPos : {x:5,y:10},
spotCoord1: {x:36,y:36,rad:13},
spotCoord2: {x:72,y:38,rad:7},
PngObjIE : euImageNoFadingIE_PNG
}}</b>
</pre>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center><b>euLabel Object:</b></center>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<br>Add inside your <HEAD></HEAD> HTML tag:
<pre>
<HEAD>
...
<script language="JavaScript1.3" src="js/euDock.Label.js"></script>
...
</HEAD>
</pre>
Object Definition:
<pre>
/*
* euLabel is the euLabel Object inside the "euDock.Label.js" script
* the common constructor is:
*
* {euLabel:{
* object :[-The object you want inside the euLabel-],
* txt :[-Label text-];
* style :[-CSS Style of the label-],
* anchor :[-Hooking Position-],
* offsetX:[-X Offset-],
* offsetY:[-Y Offset-]}}
*
* object : can be every euDock object with his parameters (see the examples)
* txt : The text you want inside the label
* style : (unnecessary) CSS style of the label
* : (the text is inside a SPAN element)
* anchor : (euUP,euDOWN,euLEFT,euRIGHT)
* : Align to the middle (TOP,DOWN,LEFT,RIGHT) of the Icon
* offsetX: X and Y offset from
* offsetY: the previous anchor
*/<b>
{euLabel:{
object : {euGhost:{
ghost : "ghostImages/ghost_purple-1.png",
eyeball : "ghostImages/eyes.png",
eyespot_1 : "ghostImages/eye-spot-1.png",
eyespot_2 : "ghostImages/eye-spot-2.png",
shadow : "ghostImages/eyes-shadow.png",
shadowPos : {x:5,y:10},
spotCoord1: {x:36,y:36,rad:13},
spotCoord2: {x:72,y:38,rad:7}
}},
txt : "HI I"M a <b>GHOST</b>",
style : "border : 1px solid #9Fb6b6;",
anchor : euDOWN,
offsetX : 0,
offsetY : -120}}</b>
Another example<b>
{euLabel:{
object : {euImage:{image:"iconsEuDock/euDock-purple.png"}},
txt : "HI I"M a <b>LABEL</b><br>I"m the other line";
style : "text-align : center; border : 5px dashed #9Fb6b6;",
anchor : euDOWN,
offsetX : 0,
offsetY : -120}}</b>
</pre>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center>
<b>euDock 2.0 can be complex to use</b><br>
<b>(For Developers) I suggest to see all the tutorial sources</b><br>
</center>
</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.setScreenAlign(euDOWN,0);
dock.setAnimation(euMOUSE,0.3);
dock.animFading = euRELATIVE;
dock.setBar({
left :{euGhost:{ ghost : "barImages/bar-dockBg-l.png",
eyeball : "barImages/bar-eyes.png",
eyespot_1 : "barImages/bar-eye-spot.png",
eyespot_2 : "barImages/bar-eye-spot.png",
spotCoord1: {x:17,y:16,rad:7},
spotCoord2: {x:33,y:17,rad:5},
PngObjIE : euImageNoFadingIE_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/euDock-red.png",
PngObjIE : euImageNoFadingIE_PNG}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euBlank:{width:100,height:100}},
{euImage:{image:"iconsEuDock/euDock-red.png"}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euBlank:{width:100,height:100}},
{euGhost:{
ghost : "ghostImages/ghost_red-1.png",
eyeball : "ghostImages/eyes.png",
eyespot_1 : "ghostImages/eye-spot-1.png",
eyespot_2 : "ghostImages/eye-spot-2.png",
shadow : "ghostImages/eyes-shadow.png",
shadowPos : {x:5,y:10},
spotCoord1: {x:36,y:36,rad:13},
spotCoord2: {x:72,y:38,rad:7}
}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euLabel:{
object:{euImage:{image:"iconsEuDock/euDock-purple.png"}},
txt :" HI... I"M a <b>LABEL</b> ",
style :"background:#eeefff;border-style:solid;border-color:#9Fb6b6;border-width:3px;",
anchor:euDOWN,
offsetX:0,
offsetY:-120}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage : {image:"iconsEuDock/euDock-red.png",
PngObjIE : euImageNoFadingIE_PNG}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/euDock-red.png"}},
{euLabel:{
object:{euGhost:{
ghost : "ghostImages/ghost_purple-1.png",
eyeball : "ghostImages/eyes.png",
eyespot_1 : "ghostImages/eye-spot-1.png",
eyespot_2 : "ghostImages/eye-spot-2.png",
shadow : "ghostImages/eyes-shadow.png",
shadowPos : {x:5,y:10},
spotCoord1: {x:36,y:36,rad:13},
spotCoord2: {x:72,y:38,rad:7}
}},
txt :" HI... I"M a <b>GHOST</b> ",
style :"background:#eeefff;border-style:solid;border-color:#9Fb6b6;border-width:3px;",
anchor:euDOWN,
offsetX:0,
offsetY:-120}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage : {image:"iconsEuDock/euDock-red.png",
PngObjIE : euImageNoFadingIE_PNG}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage:{image:"iconsEuDock/euDock-gold.png"}},
{euLabel:{
object:{euBlank:{width:100,height:100}},
txt :" HI... I"M a <b>LABEL</b> <br> WITH a <b>blankObject</b> inside ",
style :"text-align:center;background:#ffff88;border:5px dashed #9Fb6b6;",
anchor:euDOWN,
offsetX:0,
offsetY:-120}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage : {image:"iconsEuDock/euDock-red.png",
PngObjIE : euImageNoFadingIE_PNG}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage : {image:"iconsEuDock/euDock-red.png",
PngObjIE : euImageNoFadingIE_PNG}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage : {image:"iconsEuDock/euDock-red.png",
PngObjIE : euImageNoFadingIE_PNG}}),
{link:"http://eudock.jules.it"});
dock.addIcon(new Array({euImage : {image:"iconsEuDock/euDock-red.png",
PngObjIE : euImageNoFadingIE_PNG}}),
{link:"http://eudock.jules.it"});
</script>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/eudock2.0.zip">eudock2.0.zip( 352 k)</a>
euDock 2.0 examples 2
<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 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>
And everywhere:
<pre>
<script>
euEnv.imageBasePath="js/";
var dock = new euDock();
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"}}),
{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>
</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>
/*
* 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 : in this case there is an euImage array of 1 element
* iconParameters : "link" is the url where you want to go
*/<b>
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});</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.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"}}),
{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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/eudock2.0.zip">eudock2.0.zip( 352 k)</a>
Not So Simple 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 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();
//added from previous (simple fading images) tutorial<b>
dock.setAnimation(euMOUSE,0.3);</b>
//added from previous (simple) tutorial<b>
dock.setScreenAlign(euLEFT,0);</b>
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>
</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).setScreenAlign(align,offset)
*
* align euDock to the screen borders
* align : (euUP,euDOWN,euLEFT,euRIGHT)
* offset : the distance between screen border and euDock
*/<b>
dock.setScreenAlign(euLEFT,0);</b>
/*
* 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)-]}}
*/<b>
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"}}
});</b>
/*
* (unnecessary)
*
* (euDock object).setIconsOffset(offset);
*
* offset:the distance between base align bar and the base align icons
* default is 0
*/<b>
dock.setIconsOffset(1);</b>
/*
* (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
*/<b>
dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
{link:"http://eudock.jules.it"});</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.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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/eudock2.0.zip">eudock2.0.zip( 352 k)</a>
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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/eudock2.0.zip">eudock2.0.zip( 352 k)</a>
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>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);
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>
/*
* 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.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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/eudock2.0.zip">eudock2.0.zip( 352 k)</a>
