...

View Full Version : How to create a slideshow like this one???



Uzair
07-13-2007, 09:11 AM
Go to http://www.shaadi.com
There's a slideshow on right side. Its a freeware image slideshow with description & control buttons. Someone please tell me where I can find this slideshow(opensource)? OR is there any similar FREE SlideShow script? Please let me know.

Thanks

vwphillips
07-13-2007, 01:49 PM
<!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 {
width:200px;height:100px;border:solid black 1px;
}
.Controls{
position:absolute;left:60px;top:80px;z-Index:2;width:80px;height:'20px';background-Color:blue;
}

/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
<!--
// Element Animator (06-March-2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height, Color, Opacity style
// (or otherproperties) of an element over a specified period of time.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
// If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcChangeLTWHCO('left','tst1',20,260,2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc. (string)
// Note: the first character after the hyphen must be be upper case, all others lower case.
// With the exception of opacity and color the property value units is in 'px'.
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// parameter 5 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
// whenever required, say from an onclick/mouseover/out event. The original progression type and period parameters
// will be retained unless re-specified, the start and finish parameters must be specified.
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code (about 3.7K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



// **** Functional Code - NO NEED to Change

var zxcOOPCnt=0;

function zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
else zxcobj[zxcmde.replace('-','')+'oop']=new zxcAnimatorOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
}

function zxcAnimatorOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcplot){
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
this.to=null;
this.ref='zxcltwhco'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj;
this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot);
}

zxcAnimatorOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot){
clearTimeout(this.to);
this.mde=this.mde||zxcmde;
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
this.curve=zxccurve.charAt(0).toLowerCase();
this.sf=[(!zxcmde.match('olor'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcmde.match('olor'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cngltwhco();
}

zxcAnimatorOOP.prototype.cngltwhco=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=(this.curve=='s')?Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]):(this.curve=='c')?(this.sf[1][0])-Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.cos(this.inc*zxcms)):(this.sf[1][zxc0]-this.sf[0][zxc0])/this.time*zxcms+this.sf[0][zxc0]; }
this.cngstyle(this.sf[2]);
if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
else this.cngstyle(this.sf[1]);
}

zxcAnimatorOOP.prototype.cngstyle=function(zxcltwhco){
if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcltwhco[0]+','+zxcltwhco[1]+','+zxcltwhco[2]+')';
else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=zxcltwhco[0]+'px';
else this.opacity(zxcltwhco[0]);
}

zxcAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

zxcAnimatorOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcStyleValue(zxcel,zxcp){
if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcRGBSplit(zxccol){
if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol .substring(5,7),16); }
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}


//-->
</script>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcInitSlideSS(zxcid,zxcspd){
var zxcp=document.getElementById(zxcid);
var zxcclds=zxcObjTxtNodes(zxcp);
zxcES(zxcp,{position:(zxcStyleValue(zxcp,'position')=='absolute')?'absolute':'relative',overflow:'hi dden'});
zxcp.slide=zxcES('DIV',{position:'absolute',left:'0px',top:'0px',width:'100px',height:zxcStyleValue( zxcp,'height')},zxcp);
var zxcw=parseInt(zxcStyleValue(zxcp,'width'));
for (var zxc0=0;zxc0<zxcclds.length-1;zxc0++){
zxcES(zxcclds[zxc0],{position:'absolute',left:(zxcw*zxc0)+'px',top:'0px',width:zxcw+'px',height:zxcStyleValue(zxcp,'hei ght')},zxcp.slide);
}
zxcES(zxcp.slide,{width:(zxcw*zxc0)+'px'});
zxcp.slide.cnt=0;
zxcp.slide.spd=zxcspd||1000;
}

function zxcSlide(zxcid,zxclr){
var zxcp=document.getElementById(zxcid).slide;
var zxcslides=zxcp.childNodes
zxcp.cnt+=zxclr;
zxcp.cnt=(zxcp.cnt<0)?0:(zxcp.cnt>zxcslides.length-1)?zxcslides.length-1:zxcp.cnt;
zxcAnimator('left',zxcp,parseInt(zxcp.style.left),-parseInt(zxcslides[zxcp.cnt].style.left),'sin',zxcp.spd);
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcObjTxtNodes(zxcp,zxckp){
var zxcclds=zxcp.childNodes,zxctxt=[],zxcobjs=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType==1) zxcobjs.push(zxcclds[zxca]); else zxctxt.push(zxcclds[zxca]); }
if (!zxckp){ for (var zxcb=0;zxcb<zxctxt.length;zxcb++){ zxcp.removeChild(zxctxt[zxcb]); } return zxcobjs; }
return [zxcobjs,zxctxt];
}

function zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

/*]]>*/
</script>

</head>

<body onload="zxcInitSlideSS('Tst',2000);">
<div id="Tst" >
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="Controls">
<input type="button" value="<<" onclick="zxcSlide('Tst',-1);" />
<input type="button" value=">>" onclick="zxcSlide('Tst',1);" />
</div>

</div>


</body>

</html>

vwphillips
07-14-2007, 05:25 AM
<!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 {
width:300px;height:100px;border:solid black 1px;
}
.Controls{
position:relative;left:60px;z-Index:2;width:80px;height:'20px';background-Color:blue;
}

/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
<!--
// Element Animator (06-March-2007) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height, Color, Opacity style
// (or otherproperties) of an element over a specified period of time.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
// If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcChangeLTWHCO('left','tst1',20,260,2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc. (string)
// Note: the first character after the hyphen must be be upper case, all others lower case.
// With the exception of opacity and color the property value units is in 'px'.
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// parameter 5 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
// whenever required, say from an onclick/mouseover/out event. The original progression type and period parameters
// will be retained unless re-specified, the start and finish parameters must be specified.
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code (about 3.7K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



// **** Functional Code - NO NEED to Change

var zxcOOPCnt=0;

function zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
else zxcobj[zxcmde.replace('-','')+'oop']=new zxcAnimatorOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
}

function zxcAnimatorOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcplot){
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
this.to=null;
this.ref='zxcltwhco'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj;
this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot);
}

zxcAnimatorOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot){
clearTimeout(this.to);
this.mde=this.mde||zxcmde;
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
this.curve=zxccurve.charAt(0).toLowerCase();
this.sf=[(!zxcmde.match('olor'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcmde.match('olor'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cngltwhco();
}

zxcAnimatorOOP.prototype.cngltwhco=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=(this.curve=='s')?Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]):(this.curve=='c')?(this.sf[1][0])-Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.cos(this.inc*zxcms)):(this.sf[1][zxc0]-this.sf[0][zxc0])/this.time*zxcms+this.sf[0][zxc0]; }
this.cngstyle(this.sf[2]);
if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
else this.cngstyle(this.sf[1]);
}

zxcAnimatorOOP.prototype.cngstyle=function(zxcltwhco){
if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcltwhco[0]+','+zxcltwhco[1]+','+zxcltwhco[2]+')';
else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=zxcltwhco[0]+'px';
else this.opacity(zxcltwhco[0]);
}

zxcAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

zxcAnimatorOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcStyleValue(zxcel,zxcp){
if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcRGBSplit(zxccol){
if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol .substring(5,7),16); }
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}


//-->
</script>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcInitSlideSS(zxcid,zxcnu,zxcspd){
var zxcp=document.getElementById(zxcid);
var zxcclds=zxcObjTxtNodes(zxcp);
zxcES(zxcp,{position:(zxcStyleValue(zxcp,'position')=='absolute')?'absolute':'relative',overflow:'hi dden'});
zxcp.slide=zxcES('DIV',{position:'absolute',left:'0px',top:'0px',width:'100px',height:zxcStyleValue( zxcp,'height')},zxcp);
zxcp.slide.spd=zxcspd||1000;
zxcp.slide.cnt=0;
var zxcw=parseInt(zxcStyleValue(zxcp,'width'))/zxcnu;
for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
zxcES(zxcclds[zxc0],{position:'absolute',left:(zxcw*zxc0)+'px',top:'0px',width:zxcw+'px',height:zxcStyleValue(zxcp,'hei ght')},zxcp.slide);
}
zxcES(zxcp.slide,{width:(zxcw*zxc0)+'px'});
}

function zxcSlide(zxcid,zxclr){
var zxcp=document.getElementById(zxcid).slide;
var zxcslides=zxcp.childNodes;
zxcp.cnt+=zxclr;
zxcp.cnt=(zxcp.cnt<0)?0:(zxcp.cnt>zxcslides.length-1)?zxcslides.length-1:zxcp.cnt;
zxcAnimator('left',zxcp,parseInt(zxcp.style.left),-parseInt(zxcslides[zxcp.cnt].style.left),'sin',zxcp.spd);
}

function zxcImgClick(zxcobj,zxcid,zxcnu){
var zxcimgs=zxcobj.parentNode.getElementsByTagName('IMG');
var zxcp=document.getElementById(zxcid).slide;
var zxcslides=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
zxcimgs[zxc0].src=(zxcimgs[zxc0]==zxcobj)?'http://www.vicsjavascripts.org.uk/StdImages/One.gif':'http://www.vicsjavascripts.org.uk/StdImages/Zero.gif';
if (zxcimgs[zxc0]==zxcobj){
zxcp.cnt=(zxcnu*zxc0);
zxcAnimator('left',zxcp,parseInt(zxcp.style.left),-parseInt(zxcslides[zxcp.cnt].style.left),'sin',zxcp.spd);
}
}
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcObjTxtNodes(zxcp,zxckp){
var zxcclds=zxcp.childNodes,zxctxt=[],zxcobjs=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType==1) zxcobjs.push(zxcclds[zxca]); else zxctxt.push(zxcclds[zxca]); }
if (!zxckp){ for (var zxcb=0;zxcb<zxctxt.length;zxcb++){ zxcp.removeChild(zxctxt[zxcb]); } return zxcobjs; }
return [zxcobjs,zxctxt];
}

function zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}


/*]]>*/
</script>

</head>

<body onload="zxcInitSlideSS('Tst',2,2000);">
<div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" height="20" width="20" onclick="zxcImgClick(this,'Tst',2);">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" height="20" width="20" onclick="zxcImgClick(this,'Tst',2);" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" height="20" width="20" onclick="zxcImgClick(this,'Tst',2);">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" height="20" width="20" onclick="zxcImgClick(this,'Tst',2);" >
</div>
<div id="Tst" >
<div style="text-Align:center;" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" height="100" width="50" ></div>
<div style="text-Align:center;" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" height="100" width="50" ></div>
<div style="text-Align:center;" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" height="100" width="50" ></div>
<div style="text-Align:center;" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" height="100" width="50" ></div>
<div style="text-Align:center;" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" height="100" width="50" ></div>
<div style="text-Align:center;" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" height="100" width="50" ></div>
<div style="text-Align:center;" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" height="100" width="50" ></div>
<div style="text-Align:center;" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" height="100" width="50" ></div>
</div>
<div class="Controls">
<input type="button" value="<<" onclick="zxcSlide('Tst',-2);" />
<input type="button" value=">>" onclick="zxcSlide('Tst',2);" />
</div>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum