in principle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
.wrapper {
position:absolute;left:100px;top:100px;width:500px;height:80px;;
}
.parent {
position:relative;width:500px;height:80px;border:solid red 1px;
}
.slide {
position:absolute;left:0px;top:0px;
}
.slide IMG {
position:relative;width:80px;height:80px;
}
.tt {
position:absolute;left:0;top:-3000px;width:100px;height:30px;background-Color:#FFFFCC;border:solid red 1px;text-Align:center;
}
#left {
position:absolute;left:-20px;top:30px;
}
#right {
position:absolute;left:500px;top:30px;
}
-->
</style></head>
<body>
<div class="wrapper" >
<img id="left" src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" alt="left">
<img id="right" src="http://www.vicsjavascripts.org.uk/StdImages/Right.gif" alt="right">
<div id="tst" class="parent" >
<div class="slide" >
<img src="http://photos-e.ak.fbcdn.net/photos-ak-snc7/v43/65/185206204952813/app_115_185206204952813_1447375120.png" alt="img" >
<img src="http://photos-a.ak.fbcdn.net/photos-ak-snc7/v27562/110/188329771306514/app_115_188329771306514_1973733465.png" alt="img">
<img src="http://photos-g.ak.fbcdn.net/photos-ak-snc7/v27562/152/187615851381908/app_115_187615851381908_2034027906.png" alt="img">
<img src="http://photos-c.ak.fbcdn.net/photos-ak-snc7/v43/61/438254116229977/app_115_438254116229977_196010825.png" alt="img">
<img src="http://photos-b.ak.fbcdn.net/photos-ak-snc7/v43/10/478243465561270/app_115_478243465561270_511788033.png" alt="img">
<img src="http://photos-f.ak.fbcdn.net/photos-ak-snc7/v27562/187/499619520082807/app_115_499619520082807_1810348537.png" alt="img">
<img src="http://photos-a.ak.fbcdn.net/photos-ak-snc7/v27562/131/224744094326939/app_115_224744094326939_1880375142.png" alt="img">
<img src="http://photos-h.ak.fbcdn.net/photos-ak-snc7/v43/10/310414632391846/app_115_310414632391846_323797055.png" alt="img">
<img src="http://photos-g.ak.fbcdn.net/photos-ak-snc7/v43/113/148930255257449/app_115_148930255257449_1079919384.png" alt="img">
<img src="http://photos-d.ak.fbcdn.net/photos-ak-snc7/v43/168/354510377980332/app_115_354510377980332_1819773013.png" alt="img">
<img src="http://photos-a.ak.fbcdn.net/photos-ak-snc7/v27562/153/514754711897733/app_115_514754711897733_1825341254.png" alt="img">
</div>
<div class="tt" >Tool Tip 1</div>
<div class="tt" >Tool Tip 2</div>
<div class="tt" >Tool Tip 3</div>
<div class="tt" >Tool Tip 4</div>
<div class="tt" >Tool Tip 5</div>
<div class="tt" >Tool Tip 6</div>
<div class="tt" >Tool Tip 7</div>
<div class="tt" >Tool Tip 8</div>
<div class="tt" >Tool Tip 9</div>
<div class="tt" >Tool Tip 10</div>
<div class="tt" >Tool Tip 11</div>
</div>
</div>
<input type="button" name="" value="Forward" onmouseup="zxcSSC.Step('tst',1);">
<input type="button" name="" value="Back" onmouseup="zxcSSC.Step('tst',-1);">
<script type="text/javascript">
<!--
// Simple Step Carousel. (8-January-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcSSC={
init:function(o){
var id=o.ID,ms=o.StepDuration,op=o.Opacity,op=typeof(op)=='number'&&op>10&&op<=100?op:false,lb=document.getElementById(o.LeftButton),rb=document.getElementById(o.RightButton),mde=['left','offsetLeft','width','offsetWidth','offsetHeight'],p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],imgs=obj.getElementsByTagName('IMG'),tts=p.getElementsByTagName('DIV'),c=document.createElement('IMG'),ary=[],z0=0,z1=0;
obj.style[mde[2]]='3000px';
p.style.overflow='hidden';
if (rb){
rb.style.visibility='hidden';
this.addevt(rb,'mouseup','Step',id,-1);
}
if (lb){
this.addevt(lb,'mouseup','Step',id,1);
}
o=zxcSSC['zxc'+id]={
id:id,
mde:mde[0],
obj:obj,
ary:ary,
ms:typeof(ms)=='number'&&ms>20?ms:20,
op:op,
now:0,
lb:lb,
rb:rb,
cnt:0
}
obj.appendChild(c);
o.max=-c[mde[1]]+p[mde[3]];
obj.removeChild(c);
for (;z0<imgs.length;z0++){
ary[z0]=[imgs[z0],-imgs[z0][mde[1]],imgs[z0][mde[3]]];
if (op){
this.opc(imgs[z0],op);
this.addevt(imgs[z0],'mouseover','mse',o,imgs[z0],false);
this.addevt(imgs[z0],'mouseout','mse',o,imgs[z0],true);
if (tts[z0+1]){
ary[z0][3]=[tts[z0+1],tts[z0+1][mde[3]],tts[z0+1][mde[4]]];
this.addevt(imgs[z0],'mouseover','tooltip',o,ary[z0],false);
this.addevt(imgs[z0],'mouseout','tooltip',o,ary[z0],true);
}
}
}
for (;z1<ary.length;z1++){
if (ary[z1][3]){
document.body.appendChild(ary[z1][3][0]);
}
}
},
Step:function(id,ud){
var o=zxcSSC['zxc'+id],ud=typeof(ud)=='number'?ud<0?-1:1:1,nu,t;
if (o){
nu=o.cnt+ud,t=o.ary[nu];
if (t&&(ud>0&&t[1]>o.max)||(ud<0&&nu>=0)){
this.animate(o,o.now,t[1],new Date(),o.ms);
o.cnt=nu;
}
if (o.lb){
o.lb.style.visibility=(o.ary[nu+1]&&o.ary[nu+1][1]>o.max)?'visible':'hidden';
}
if (o.rb){
o.rb.style.visibility=o.cnt>0?'visible':'hidden';
}
}
},
animate:function(o,f,t,srt,mS,sc,inc){
clearTimeout(o.dly);
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.now=now;
o.obj.style[o.mde]=now+'px';
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
}
else {
o.now=t;
o.obj.style[o.mde]=t+'px';
}
},
opc:function(obj,opc){
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
},
mse:function(o,img,ud){
this.opc(img,ud?o.op:100);
},
tooltip:function(o,ary,ud){
var p=this.pos(ary[0]),w=ary[2],a=ary[3];
a[0].style.left=p[0]+(w-a[1])/2+'px';
a[0].style.top=(ud?-3000:p[1]-a[2]-5)+'px';
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,p,p1,p2){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
}
}
}
zxcSSC.init({
ID:'tst', // the unique ID name of the parent DIV. (string)
StepDuration:500, //(optional) the animation speed in milli seconds. (number, default = < 20 = no animation)
Opacity:50, //(optional) animate mask opacity(0 to 100). (number, default = CSS opacity)
LeftButton:'left', //(optional) the unique ID name of left control element. (string, default = no left control element)
RightButton:'right' //(optional) the unique ID name of right control element.(string, default = no right control element)
});
//-->
</script>
</body>
</html>