voici le code
code:
<HTML><HEAD><TITLE>Smart Scroller</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var dom = document.getElementById; var ie = document.all;
function capEv(event,method){this[event] = method;};function relEv(event){ this[event] = null;};function getYs(e){ return ie ? event.clientY : e.pageY;}
function getEl(nm){var el = dom ? document.getElementById(nm) : ie ? document.all[nm] : false;el.getTop = function(){return parseInt(el.offsetTop) || 5}; el.setTop = function(y){el.style.top = y+"px"};el.getHeight = function(){return el.offsetHeight}; el.getClipHeight = function(){return el.offsetHeight}; el.capEv = capEv; el.relEv = relEv; return el;}
document.capEv = capEv; document.relEv = relEv;
sObj = function(s, tObj, uObj, dObj, dgObj, hObj, cObj){
this.s = s; var self = this; this.tObj = getEl(tObj); this.uObj = getEl(uObj); this.dObj = getEl(dObj); this.dgObj = getEl(dgObj); this.hObj = getEl(hObj); this.cObj = getEl(cObj,hObj);
this.dH = this.dgObj.getHeight(); this.tH = this.tObj.getHeight(); this.obj = cObj+"Object"; eval(this.obj+"=this"); this.tT = this.dgObj.getTop(); this.tL = this.tH-this.dH; this.tB = this.tT+this.tL; this.hH = this.hObj.getClipHeight(); this.cH = this.cObj.getHeight(); this.cL = this.cH-this.hH; this.sL = this.tL/this.cL; this.sT = null;
this.tObj.capEv("onmousedown", function(e){self.sJmp(e);return false}); this.uObj.capEv("onmousedown", function(){self.scroll(self.s);return false});
this.uObj.capEv("onmouseup", function(){self.stSc()}); this.uObj.capEv("onmouseout", function(){self.stSc()}); this.dObj.capEv("onmousedown", function(){self.scroll(-self.s);return false}); this.dObj.capEv("onmouseup", function(){self.stSc()});
this.dObj.capEv("onmouseout", function(){self.stSc()}); this.dgObj.capEv("onmousedown", function(e){self.sDg(e);return false}); if(ie) this.dgObj.capEv("ondragstart", function(){return false});
}
sObj.prototype.sDg = function(e){this.dSM = getYs(e); this.dSO = this.dgObj.getTop(); var self = this; document.capEv("onmousemove", function(e){self.drag(e)}); document.capEv("onmouseup", function(){self.stD()});}
sObj.prototype.stD = function(){document.relEv("onmousemove"); document.relEv("onmouseup");}
sObj.prototype.drag = function(e){var curM = getYs(e); var mDiff = curM-this.dSM;var dD = this.dSO+mDiff; var dM = (dD<this.tT) ? this.tT : (dD>this.tB) ? this.tB : dD;this.dgObj.setTop(dM); var cM = -(dM-this.tT)*(1/this.sL);this.cObj.setTop(cM);}
sObj.prototype.scroll = function(s){var cM = this.cObj.getTop()+s; var dM = this.tT-Math.round(this.cObj.getTop()*(this.tL/this.cL)); if(cM > 0) cM = 0; else if(cM < -this.cL) cM = -this.cL;if(dM < this.tT) dM = this.tT; else if(dM > this.tB) dM = this.tB;this.cObj.setTop(cM); this.dgObj.setTop(dM); this.sT = window.setTimeout(this.obj+".scroll("+s+")",25);}
sObj.prototype.stSc = function(){if(this.sT) window.clearTimeout(this.sT); this.sT = null;}
sObj.prototype.sJmp = function(e){ var curM = getYs(e); var dD = curM-(this.dH/2);var dM = (dD<this.tT) ? this.tT : (dD>this.tB) ? this.tB : dD;this.dgObj.setTop(dM); var cM = -(dM-this.tT)*(1/this.sL); this.cObj.setTop(cM);}
window.onload = function(){scroller = new sObj(15,"track","up","down","drag","container","content");};
</SCRIPT>
<STYLE type=text/css>#content P {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; FONT: 0px Verdana, Arial, Helvetica, sans-serif; PADDING-TOP: 0px
}
</STYLE>
</HEAD>
<BODY>
<DIV id=track
style="BACKGROUND: #none; LEFT: 900px; WIDTH: 18px; POSITION: absolute; TOP: 116px; HEIGHT: 418px"><IMG
height=418 alt=drag src="bar2.gif" width=15></DIV>
<DIV id=up
style="BACKGROUND: #none; LEFT: 900px; WIDTH: 18px; POSITION: absolute; TOP: 100px; HEIGHT: 18px"><img src="fleche1.gif" border="0"
onMouseOver="this.src='fleche1b.gif'" onMouseOut="this.src='fleche1.gif'">
</a> </DIV>
<DIV id=drag
style="BACKGROUND: #none; LEFT: 902px; WIDTH: 18px; POSITION: absolute; TOP: 116px; HEIGHT: 36px"><img src="bar1.gif" border="0"></DIV>
<DIV id=down
style="BACKGROUND: #none; LEFT: 900px; WIDTH: 18px; POSITION: absolute; TOP: 529px; HEIGHT: 18px"><img src="fleche2.gif" border="0"
onMouseOver="this.src='fleche2b.gif'" onMouseOut="this.src='fleche2.gif'">
</a> </DIV>
<DIV id=container
style="BACKGROUND: #none; LEFT: 100px; OVERFLOW: hidden; WIDTH: 800px; POSITION: absolute; TOP: 100px; HEIGHT: 450px">
<DIV id=content style="LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px">
<P><img height=450width=800
src="http://www.perfectdark.com/games/upcoming/pdzero/shots/pdzero_04.jpg" border=0 > </P>
<P><img height=450 width=800 src="http://www.perfectdark.com/games/upcoming/pdzero/shots/pdzero_05.jpg" border=0 > </P>
<P><img height=450 width=800 src="http://www.perfectdark.com/games/upcoming/pdzero/shots/pdzero_06.jpg" border=0 > </P>
<P><img height=450 width=800 src="http://www.perfectdark.com/games/upcoming/pdzero/shots/pdzero_07.jpg" border=0 > </P>
<P><img height=450 width=800 src="http://www.perfectdark.com/games/upcoming/pdzero/shots/pdzero_08.jpg" border=0 > </P>
<P><img height=450 width=800 src="http://www.perfectdark.com/games/upcoming/pdzero/shots/pdzero_09.jpg" border=0 > </P>
<P><img height=600 width=650 src="http://www.perfectdark.com/games/upcoming/pdzero/shots/pdzero_01.jpg" border=0 > </P>
<P><img height=600 width=650 src="http://www.perfectdark.com/games/upcoming/pdzero/shots/pdzero_02.jpg" border=0 > </P>
<P><img height=600 width=650 src="http://www.perfectdark.com/games/upcoming/pdzero/shots/pdzero_03.jpg" border=0 > </P></DIV></BODY></HTML>
le problème est comment je peut en mettre plusieurs avec scrollbar1,scrollbar2 et scrollbar3 répondez au plus vite si ça voue est possible merci
