JavaScript DHTML/Ajax Layer/Dock
Содержание
Align Tutorial euDock 2.0
<source lang="html4strict">
<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>
| ||
I gues that euDock creation is not a problem (is explained in the previous tutorial). | ||
Align to screen:
<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> | ||
Align an HTML object: <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> | ||
Align to a fixed position: <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> | ||
Don"t forget to put in your page:
!!!If you don"t like (of course) a personal Macumba!!! |
<a href="index.html">RETURN TO INDEX</a>
<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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/eudock2.0.zip">eudock2.0.zip( 352 k)</a>
euDock 2.0 examples
<source lang="html4strict">
<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>
| ||
| ||
<HEAD> ... <script language="JavaScript1.3" src="js/euDock.Image.js"></script> ... </HEAD> Object Definition: /* * 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> | ||
| ||
<HEAD> ... <script language="JavaScript1.3" src="js/euDock.Blank.js"></script> ... </HEAD> Object Definition: /* * 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> | ||
| ||
<HEAD> ... <script language="JavaScript1.3" src="js/euDock.Image.js"></script> <script language="JavaScript1.3" src="js/euDock.Ghost.js"></script> ... </HEAD> euGhost need euImage object (inside "euDock.Image.js" script) render engine /* * 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> | ||
| ||
<HEAD> ... <script language="JavaScript1.3" src="js/euDock.Label.js"></script> ... </HEAD> Object Definition: /* * 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> | ||
euDock 2.0 can be complex to use | ||
Don"t forget to put in your page:
!!!If you don"t like (of course) a personal Macumba!!! |
<a href="index.html">RETURN TO INDEX</a>
<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 LABEL ", 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 GHOST ", 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 LABEL
WITH a blankObject 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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/eudock2.0.zip">eudock2.0.zip( 352 k)</a>
euDock 2.0 examples 2
<source lang="html4strict">
<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>
| ||
<HEAD> <script language="JavaScript1.3" src="js/euDock.2.0.js"></script> <script language="JavaScript1.3" src="js/euDock.Image.js"></script> </HEAD> And everywhere: <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> | ||
<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> | ||
Don"t forget to put in your page:
!!!If you don"t like (of course) a personal Macumba!!! |
<a href="index.html">RETURN TO INDEX</a>
<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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/eudock2.0.zip">eudock2.0.zip( 352 k)</a>
Not So Simple euDock 2.0
<source lang="html4strict">
<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>
| ||
<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> | ||
<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> | ||
Don"t forget to put in your page:
!!!If you don"t like (of course) a personal Macumba!!! |
<a href="index.html">RETURN TO INDEX</a>
<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>
</source>
<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
<source lang="html4strict">
<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>
| ||
<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> | ||
<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> | ||
Don"t forget to put in your page:
!!!If you don"t like (of course) a personal Macumba!!! |
<a href="index.html">RETURN TO INDEX</a>
<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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/eudock2.0.zip">eudock2.0.zip( 352 k)</a>
Simple Fading Images euDock 2.0
<source lang="html4strict">
<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>
| ||
<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> | ||
<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> | ||
Don"t forget to put in your page:
!!!If you don"t like (of course) a personal Macumba!!! |
<a href="index.html">RETURN TO INDEX</a>
<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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/eudock2.0.zip">eudock2.0.zip( 352 k)</a>