<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:absolute;left:0px;top:0px;width:100%;height:400px;
}
.div {
position:absolute;overflow:hidden;left:0px;top:0px;width:500px;height:400px;background-Color:red;text-Align:center;
}
#tst1 {
position:absolute;left:0px;top:410px;width:100%;height:400px;background-Color:green;
}
.tab {
position:absolute;right:0px;
}
/*]]>*/
</style></head>
<body>
<div id="tst" >
<img class="tab" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="75" onmouseup="zxcSlideTab.toggle('tst');" />
<div class="div" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" style="width:80%;height:80%;" /></div>
</div>
<div id="tst1" >
<input type="button" name="" value="Close" onmouseup="zxcSlideTab.close('tst1',true);" />
<img class="tab" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="75" onmouseover="zxcSlideTab.toggle('tst1',false);"/>
</div>
<script type="text/javascript">
/*<![CDATA[*/
var zxcSlideTab={
init:function(o){
var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0],div=obj.getElementsByTagName('DIV')[0],show=o.Show,show=typeof(show)=='number'?show:100,src=o.ImageSwap,ms=o.Animate,srt=o.AutoOpen;
if (obj){
obj.style.left=-obj.offsetWidth+show+'px';
zxcSlideTab['zxc'+o.ID]={
obj:obj,
img:img,
div:o.ResizeDiv===true&&div?div:false,
show:show,
src:img&&typeof(src)=='string'?[src,img.src]:false,
ms:typeof(ms)=='number'?ms:1000,
ud:false
}
typeof(srt)=='number'&&srt>0?o.to=setTimeout(function(){ oop.toggle(o.ID,false); },srt):null;
}
},
toggle:function(id,ud){
var o=this['zxc'+id];
if (o){
var f=parseInt(o.obj.style.left),min=-o.obj.offsetWidth+o.show,ud=typeof(ud)=='boolean'?ud:o.ud,t=ud?min:0;
if (o.div){
o.div.style.width=o.obj.offsetWidth-o.show+'px';
}
o.ud=!ud;
clearTimeout(o.to);
clearTimeout(o.dly);
if (o.src){
o.img.src=o.src[ud?1:0];
}
this.animate(o,'left',f,t,new Date(),o.ms*Math.abs((t-f)/min),ud);
}
},
close:function(id){
var o=this['zxc'+id],oop=this;
if (o){
o.dly=setTimeout(function(){ oop.toggle(id,true); },200);
}
},
animate:function(o,mde,f,t,srt,mS,ud){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.obj.style[mde]=now+'px';
}
if (ms<mS){
o.to=setTimeout(function(){ oop.animate(o,mde,f,t,srt,mS,ud); },10);
}
else {
o.obj.style[mde]=t+'px';
}
}
}
zxcSlideTab.init({
ID:'tst', // the unique ID nameof the Slide DIV. (string)
Show:100, //(optional) the amount of the Slide DIV to show when retracted. (number, default = 100)
ImageSwap:'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg', // the swap image file path and name. (string, default = no image src swap)
ResizeDiv:true, //(optional) true = resize the first Slide DIV div to the Side DIV width. (boolean, default = no resize)
Animate:1000, //(optional) the slide duration in milli seconds. (number, default = 1000)
AutoOpen:1000 //(optional) open the panel after n milli seconds on page load. (number, default = no auto open)
})
zxcSlideTab.init({
ID:'tst1'
})
window.onresize=function(){
zxcSlideTab.toggle('tst',true);
zxcSlideTab.toggle('tst1',true);
}
/*]]>*/
</script>
</body>
</html>