<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
#slidebar{ overflow: hidden; }
#slidebar a{
display: block; background-repeat: no-repeat; outline: none;
}
#slidebar a#top{
background-image: url("http://webcare.byside.com/agent/liveagentskins/zon2/bg.png"); z-index: 1; width: 125px;
}
#slidebar a#bottom{
background-image: url("http://webcare.byside.com/agent/liveagentskins/zon2/bg2.png"); right: -160px;
}
#slidebar ul{display: inline; list-style: none;}
#slidebar, #slidebar a{height: 83px; position: absolute; right: 0; top: 0;}
#slidebar, #slidebar #bottom{width: 160px;}
</style>
<script type="text/javascript">
window.onload = function() {
var DummyAnimations = function() {
var
$ = function(o) { return document.getElementById(o) || null; },
_view_height = function(){
return window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
},
_Top_Middle = function(o, step, speed, to, value){
var
el = (typeof o === "object") ? o : $(o),
value = value || 0,
to = to || ((_view_height() - el.offsetHeight) / 2),
_animate = function(value) {
var
self = arguments.callee,
interval = setTimeout(function() {
if (value < to) {
value += step;
el.style.top = value + "px";
self(value);
}
else {
clearTimeout(interval);
}
}, speed);
}(value);
},
_SwitchBackground = function(o, o_bottom, step, speed){
var
el = (typeof o === "object") ? o : $(o),
el_bottom = (typeof o_bottom === "object") ? o_bottom : $(o_bottom),
el_width = el.offsetWidth,
el_bottom_width = el_bottom.offsetWidth,
_animate = function(step, speed, _width, _el_hide, _el_show, value) {
var
value = value || 0,
self = arguments.callee,
interval = setTimeout(function() {
if (value > -_width) {
value -= step;
_el_hide.style.right = value + "px";
_el_show.style.right = Math.abs(value) - _width + "px";
self(step, speed, _width, _el_hide, _el_show, value);
}
else {
clearTimeout(interval);
}
}, speed);
};
el.onmouseover = function(e){
e = e || window.event;
_animate(step, speed, el_width, el, el_bottom);
};
el_bottom.onmouseout = function(e){
e = e || window.event;
_animate(step, speed, el_bottom_width, el_bottom, el);
};
el.onclick = function(e){
e = e || window.event;
if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
};
el_bottom.onclick = function(e){
e = e || window.event;
alert("acção ....");
if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
};
};
return { TopMiddle: _Top_Middle, Switch: _SwitchBackground };
}();
DummyAnimations.TopMiddle("slidebar", 25, 50);
DummyAnimations.Switch("top", "bottom", 5, 25);
};
</script>
</head>
<body>
<div id="slidebar">
<ul>
<li><a href="#" id="top"></a></li>
<li><a href="#" id="bottom"></a></li>
</ul>
</div>
</body>
</html>
)