|
Hook to Objects...
Source:For the first example (redPepper Image) the Others are the same.
<a href="javascript:hookEuDock('redPepper','top');">HookTop</a><br>
<a href="javascript:hookEuDock('redPepper','bottom');">HookBottom</a><br>
<a href="javascript:hookEuDock('redPepper','left');">HookLeft</a><br>
<a href="javascript:hookEuDock('redPepper','right');">HookRight</a><p>
<a href="javascript:unHookEuDock();">unHook</a><p></td>
Link to EventS...
Source:(Only icon1 has linked some events, try on the dock)
var icon1 = addEuImgArray(new Array("iconsEuDock/euDock-red.gif",
"iconsEuDock/E.gif",
"iconsEuDock/u.gif",
"iconsEuDock/D.gif",
"iconsEuDock/o.gif",
"iconsEuDock/c.gif",
"iconsEuDock/k.gif",
"iconsEuDock/euDock-brown.gif" ) ,
"fadingSteps='100' fadingType='transparent'");
icon1.onChangeImage = "showChangeImages(icon1)";
icon1.onChangeSize = "drawSizes(icon1)";
icon1.onMouseOver = "showIconState(icon1)";
icon1.onMouseOut = "showIconState(icon1)";
icon1.onMouseClick = "changeImages(icon1)";
Link to onChangeImage event
(only first icon) |
| Fading Images |
| Before... | After... |
|
|
| time: (h:m:s ms) | |
|
Source:
function showChangeImages(image){
document.getElementById('eventImgBefore').src = image.getImage();
document.getElementById('eventImgAfter').src = image.getFadingImage();
tempo = new Date();
document.getElementById('timeChangeImage').innerHTML =
tempo.getHours()+":"+
tempo.getMinutes()+":"+
tempo.getSeconds()+" "+
tempo.getMilliseconds();
}
|
Link to onChangeSize event
(only first icon) |
| Size: | |
| time: (h:m:s ms) | |
|
Source:
function drawSizes(image){
document.getElementById('sizeDiv').innerHTML=
"<b>Width: </b>"+image.getWidth()+"<br>"+
"<b>Height: </b>"+image.getHeight()+"<br>"+
"<b>MaxWidth: </b>"+image.getMaxWidth()+"<br>"+
"<b>MaxHeight: </b>"+image.getMaxHeight()+"<br>";
tempo = new Date();
document.getElementById('timeChangeSize').innerHTML =
tempo.getHours()+":"+
tempo.getMinutes()+":"+
tempo.getSeconds()+" "+
tempo.getMilliseconds();
}
|
Link to onMouseOver,onMouseOut event
(only first icon) |
| What Image is? | |
| time: (h:m:s ms) | |
|
Source:
function showIconState(image){
document.getElementById('iconStateDiv').innerHTML=image.getImage();
tempo = new Date();
document.getElementById('timeIconState').innerHTML =
tempo.getHours()+":"+
tempo.getMinutes()+":"+
tempo.getSeconds()+" "+
tempo.getMilliseconds();
}
|
Link to onMouseClick event
(only first icon) |
| Images cycles between 3 different types for every Click |
| time: (h:m:s ms) | |
|
Source:
var booleanExampleChgImage = 0;
function changeImages(image){
if (booleanExampleChgImage==0){
//
//First Image SET
//
image.setImageArray(new Array("iconsEuDock/euDock-red.gif",
"iconsEuDock/euDock-gold.gif",
"iconsEuDock/euDock-green.gif",
"iconsEuDock/euDock-blue.gif",
"iconsEuDock/euDock-purple.gif" ));
image.setFadingSteps(15);
image.setFadingType('opaque');
}else if (booleanExampleChgImage==1){
//
//Second Image SET
//
image.setImageArray(new Array("iconsEuDock/euDock-red.gif",
"iconsEuDock/E.gif" ));
image.setFadingSteps(10);
image.setFadingType('fixed');
}else{
//
//Third Image SET
//
image.setImageArray(new Array("iconsEuDock/euDock-red.gif",
"iconsEuDock/E.gif",
"iconsEuDock/u.gif",
"iconsEuDock/D.gif",
"iconsEuDock/o.gif",
"iconsEuDock/c.gif",
"iconsEuDock/k.gif",
"iconsEuDock/euDock-brown.gif" ));
image.setFadingSteps(100);
image.setFadingType('transparent');
}
booleanExampleChgImage = (booleanExampleChgImage+1)%3;
tempo = new Date();
document.getElementById('timeMouseClick').innerHTML =
tempo.getHours()+":"+
tempo.getMinutes()+":"+
tempo.getSeconds()+" "+
tempo.getMilliseconds();
}
|
| |
