euDock 2.0 examples
euDock 2.0 Objects Tutorial
euImage Object:
Add inside your <HEAD></HEAD> HTML tag:
<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
*/
{euImage : {image : "iconsEuDock/euDock-red.png",
PngObjIE : euImageNoFadingIE_PNG}}
euBlank Object:
Add inside your <HEAD></HEAD> HTML tag:
<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)
*/
{euBlank:{width:100,height:100}
euGhost Object:
Add inside your <HEAD></HEAD> HTML tag:
<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
Object Definition:
/*
* 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.
*/
{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
}}
euLabel Object:
Add inside your <HEAD></HEAD> HTML tag:
<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
*/
{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}}
Another example
{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}}
euDock 2.0 can be complex to use
(For Developers) I suggest to see all the tutorial sources
REMEMBER
Don't forget to put in your page:
<a href='http://eudock.jules.it'>
<img src='http://eudock.jules.it/littlEuDock.jpg' border=0></a>
!!!If you don't like (of course) a personal Macumba!!!
RETURN TO INDEX