Bar Functions...
euBarDef( imageLU , imageC , imageRD , iconsOffset , barOffset);
Defines bar properties or Create a new Bar (if not Exist);
imageLU : left or up image of the bar (gif,png,jpg,...)
imageC : center image of the bar (gif,png,jpg,...)
imageRD : right or down image of the bar (gif,png,jpg,...)
iconsOffset : (numeric) distance (in px) between borderBar and borderImage
barOffset : (numeric) distance (in px) between borderWindow and borderBar
euDockAlign( align );
Align Bar and icons;
align : you can choose between:
: 'top'
: 'bottom' (default)
: 'left'
: 'right'
align = getEuDockAlign();
Align Bar and icons;
align : Alignment
hookEuPos( posX , posY )
Hook euDock at specified position;
posX : X position where hook the center of euDock;
posY : Y position where hook the center of euDock;
hookEuDock( idObj , position )
Hook euDock at specified object;
idObj : The id of HTML object;
position : Can assume 4 values:
:
: 'top' Place euDock center base to the top corner of the Object
: 'bottom' Place euDock center base to the bottom corner of the Object
: 'left' Place euDock center base to the left corner of the Object
: 'right' Place euDock center base to the right corner of the Object
:
: I know, it is not immediate (refer to the previous page for examples)
: I'm so sorry...
unHookEuDock()
UnHook euDock and replace it to the corner of the screen;
setEuDockSteps( arraySteps );
Set the Keyframes of enlarge icon animation
arraySteps : an array (new Array(values))
: Where you define percentage sizes of images
: (Array dimension is the number of animation steps)
EXAMPLES:
setEuDockSteps(new Array(0.3,0.4,0.5,0.6,0.7,0.8,0.9,1));
(is the default Array)
(in 9 frames the image size pass through 30% to original size(100%))
(0.3 == 30% of the original)
(1 == 100% of the original)
setEuDockSteps(new Array(0.3,0.27,0.25,0.27,0.3,0.35,0.4,0.5,0.65,0.8,1,1.3,1.2,1.1,1));
(in 15 frames the image decrease and increas with COOOOL effect)
(press KeyframesXXX button to test it)
NOTE:
1 == 100% can be (or not to be) the last value or the MAX;
...AND...
0.3 == 30% can be (or not to be) the first value or the MIN;
arraySteps = getEuDockSteps();
Align Bar and icons;
arraySteps : an array (new Array(values))
: Where you define percentage sizes of images
: (Array dimension is the number of animation steps)
Icon Functions...
returnObj = addEuImg( image , properties );
Add a single image to euDock;
image : icon (gif,png,jpg,...)
returnObj : object (immaginEu) returned (immaginEu is descripted later)
properties : You can specify some parameters for this icon
: Properties are the same of the next method
returnObj = addEuImgArray( images , properties );
Add an images Array to euDock;
images : =new Array(img1,img2,img...)
returnObj : object (immaginEu) returned (immaginEu is descripted later)
properties : You can specify some parameters for this icon:
: (NOTE. The parser is not complex so, please, write parameters like this:
: "parameter1='VALUE1' parameter2='VALUE2'"
: without spaces between the character (=) and with (') or (") in Numeric Value too)
:
:------------------------------------------------------------------------------------
:
: link='URL'
:
: URL = url... Of course...
:
:------------------------------------------------------------------------------------
:
: js='javascript'
:
: javascript = code to execute when you click the image
:
: (NOTE. properties 'js' and 'link' cannot be simultaneously placed
: on the script, js='javascript' overwrite link='url')
:
:------------------------------------------------------------------------------------
:
: minWidth='PIXELS'
:
: PIXELS = width in (PIXELS) of unselected icon
:
:------------------------------------------------------------------------------------
:
: minHeight='PIXELS'
:
: PIXELS = height in (PIXELS) of unselected icon
:
:------------------------------------------------------------------------------------
:
: maxWidth='PIXELS'
:
: PIXELS = width in (PIXELS) of selected icon
:
:------------------------------------------------------------------------------------
:
: maxHeight='PIXELS'
:
: PIXELS = height in (PIXELS) of selected icon
:
: (NOTE: Like (js & link) max parameters owerwrite min parameters)
:------------------------------------------------------------------------------------
:
: fadingSteps='STEPS'
:
: STEPS = number of total frames between first and last image
: (EXAMPLE width 3 images default steps are 5)
: (EXAMPLE width 8 images default steps are 15)
: (default steps include at least a frame
: transition between every image)
:
:------------------------------------------------------------------------------------
:
: fadingtype='TYPE'
:
: TYPE = transparent
: (Mathematical interpolation of transition)
: Background can be a bit visible
:
: opaque
: (one of the two images used for fading is not transparent)
: Not Mathematically correct but useful
:
: fixed
: (It works good only with 2 images)
: The first is used for fixed Background
: The second is used over this Background
: Very Pretty!!!
:
:--------------------NOTE------------------------------------------------------------
: Follow properties are equivalent to use appropriate methods
: EXAMPLE: properties (onMouseOver='JAVASCRIPT')
: OR imageObj.setOnMouseOver('JAVASCRIPT');
: OR imageObj.onMouseOver = 'JAVASCRIPT';
: !!!ARE THE SAME THING!!!
:--------------------END NOTE--------------------------------------------------------
:
: onMouseOver='javascript'
:
: javascript = code to execute when you are over the image
:
:------------------------------------------------------------------------------------
:
: onMouseOut='javascript'
:
: javascript = code to execute when you going out the image
:
:------------------------------------------------------------------------------------
:
: onMouseClick='javascript'
:
: javascript = code to execute when you CLICK over the image
:
:------------------------------------------------------------------------------------
:
: onChangeImage='javascript'
:
: javascript = code to execute when icon image change
:
:------------------------------------------------------------------------------------
:
: onChangeSize='javascript'
:
: javascript = code to execute when icon change its size
:
:------------------------------------------------------------------------------------
EXAMPLES:
(Parameters in this euDock)
(ICON NUMBER) "PARAMETERS"
(1) "fadingSteps='100' fadingType='transparent'"
(2) "fadingSteps='10' fadingType='fixed' minWidth='40' minHeight='50' "
(3) "fadingSteps='10' fadingType='fixed' minWidth='50' minHeight='30' "
(4) "fadingSteps='10' fadingType='fixed' maxWidth='130' maxHeight='200' "
(5) "fadingSteps='10' fadingType='fixed' js=\"alert('COOOOOOL!!!!!')\" "
(6) "fadingSteps='10' fadingType='fixed' link='SimplExample.html' "
(7) "fadingSteps='10' fadingType='fixed' link='ComplExperiment.html'"
(8) "fadingSteps='50' fadingType='opaque' link='MAMMAMIA.html' "
(9) "fadingSteps='100' fadingType='transparent' link='MAMMAMIA2.html' "
SEE parameter of 5th icon...
IT is more simple to use the appropriate function
[like onMouseClick("javascript") in spite of its homonYmous parameter];
THE immaginEu OBJECT...
Whith methods:
euImgObj = addEuImg(img,prop);
euImgObj = addEuImgArray(imgs,prop);
You get in euImgObj an (immaginEu) Object
(detailed description of next functions are the same of homonymous icon properties)
euImgObj.setImage(img);
Set a New image
img : name of the image (gif,png,jpg,...)
img = euImgObj.getImage();
Get current image shown
img : name of the current image (gif,png,jpg,...)
euImgObj.setImageArray(imgs);
Set a New array of images
imgs : Array of Images
imgs = euImgObj.getImageArray();
Get current array of images
imgs : current array of images
img = euImgObj.getFadinImage();
Get the (FADING TO) image
img : the (FADING TO) image
euImgObj.setWidth(width);
Set the Width of the image
width : the Width of the image
euImgObj.setHeight(height);
Set the Height of the image
width : the Height of the image
width = euImgObj.getWidth();
Get the (CURRENT) Width of the image
width : the (CURRENT) Width of the image
height = euImgObj.getHeight();
Get the (CURRENT) Height of the image
height : the (CURRENT) Height of the image
width = euImgObj.getMaxWidth();
Get the (Final) Width of the image
width : the (Final) Width of the image
height = euImgObj.getMaxHeight();
Get the (Final) Height of the image
height : the (Final) Height of the image
euImgObj.setFadingSteps(steps);
Set the Fading Steps of the image
steps : the Fading Steps of the image
immaginEu EVENTS...
For every link type, the two methods descripted are equivalents
euImgObj.setOnMouseOver(js);
euImgObj.onMouseOver = js;
Link to onMouseOver Event
js : code to execute
euImgObj.setOnMouseOut(js);
euImgObj.onMouseOut = js;
Link to onMouseOut Event
js : code to execute
euImgObj.setOnMouseClick(js);
euImgObj.onMouseClick = js;
Link to onMouseClick Event
js : code to execute
euImgObj.setOnChangeImage(js);
euImgObj.onChangeImage = js;
Link to onChangeImage Event
js : code to execute
euImgObj.setOnChangeSize(js);
euImgObj.onChangeSize = js;
Link to onChangeSize Event
js : code to execute
| 
