Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2013
    Posts
    22
    Thanks
    22
    Thanked 0 Times in 0 Posts

    How can I add buttons to slideshow?

    Hello,I want to add buttons to a slideshow,4 buttons more exacly,my slide show has 4 images and I want each image to have a button that makes the coresponding image to appear on the slide show,here is my coding:
    Java:
    Code:
    <script type="text/javascript">
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
     clearTimeout(this.to);
     this.time=ms||this.time||0;
     this.neg=srt<0||fin<0;
     this.data=[srt,srt,fin];
     this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
     this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcAnimate.prototype.cng=function(){
     var oop=this,ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
     this.apply();
     if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Complete) this.Complete(this);
     }
    }
    
    zxcAnimate.prototype.apply=function(){
     if (isFinite(this.data[0])){
      if (this.data[0]<0&&!this.neg) this.data[0]=0;
      if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
        <script type="text/javascript">
    
        if (document.all || document.getElementById){ //if IE4 or NS6+
        document.write('<style type="text/css">\n')
        document.write('.dyncontent{position:absolute;left:204px;top:871px; width: 944px; height: 627px;}\n')
        document.write('</style>')
        }
    
        var speed=4000;
        var curcontentindex=0
        var messages=new Array()
    
        function getElementByClass(classname){
         var alltags=document.all? document.all : document.getElementsByTagName("*")
         for (var i=0; i<alltags.length; i++){
          if (alltags[i].className==classname){
           zxcOpacity(alltags[i],messages.length==0?100:0);
           messages.push(new zxcAnimate('opacity',alltags[i],0));
          }
         }
        }
    
        function rotatecontent(){
        //get current message index (to show it):
        curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
        //get previous message index (to hide it):
        var prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
        messages[prevcontentindex].obj.style.zIndex="0" //hide previous message
        messages[prevcontentindex].animate(100,0,speed/2);
        messages[curcontentindex].obj.style.zIndex="1" //show current message
        messages[curcontentindex].animate(0,100,speed/2);
        }
    
    
        window.onload=function(){
        if (document.all || document.getElementById){
        getElementByClass("dyncontent");
        setInterval("rotatecontent()", speed);
        }
        }
    
        </script>
    HTML:
    <div style="position:relative;" >
    <img class="dyncontent" src="C:\Senso PNG\Senso_0001s_0001s_0001s_0000s_0000_image-1.png" />
    <img class="dyncontent" src="C:\Senso PNG\Senso_0001s_0001s_0001s_0000s_0001_image-2.png" />
    <img class="dyncontent" src="C:\Senso PNG\Senso_0001s_0001s_0001s_0000s_0002_image-3.png" />
    <img class="dyncontent" src="C:\Senso PNG\Senso_0001s_0001s_0001s_0000s_0003_image-4.png" />
    </div>
    Please tell me how can I add buttons to this and how to make the buttons to be a specific image.Thanks in advance
    Last edited by VIPStephan; 12-22-2013 at 09:23 PM. Reason: added code BB tags

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts
    Do you care if they are radio buttons or the normal click-on descriptive button?

  • Users who have thanked jmrker for this post:

    Bitzu (12-22-2013)

  • #3
    New Coder
    Join Date
    Dec 2013
    Posts
    22
    Thanks
    22
    Thanked 0 Times in 0 Posts





    These are the images i want to use for the buttons

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!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[*/
    #ss {
     position:absolute;left:204px;top:71px; width: 200px; height: 200px;
    
    }
    
    .dyncontent{
      position:absolute;left:0px;top:0px; width: 200px; height: 200px;
     }
    /*]]>*/
    </style></head>
    
    <body>
    <script type="text/javascript">
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
     clearTimeout(this.to);
     this.time=ms||this.time||0;
     this.neg=srt<0||fin<0;
     this.data=[srt,srt,fin];
     this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
     this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcAnimate.prototype.cng=function(){
     var oop=this,ms=new Date().getTime()-this.srttime;
     var  n=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
     if (isFinite(n)){
      this.data[0]=n;
      this.apply();
     }
     if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Complete) this.Complete(this);
     }
    }
    
    zxcAnimate.prototype.apply=function(){
     if (this.data[0]<0&&!this.neg) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
     else zxcOpacity(this.obj,this.data[0]);
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    <script type="text/javascript">
    
    
    function Next(id,ud){
     var o=rotate[id],ud=typeof(ud)=='number'&&ud<0?-1:1;
     if (o){
      o.ud=ud;
      rotate(o,o.n+ud);
     }
    }
    
    function GoTo(id,n){
     var o=rotate[id];
     if (o){
      Pause(o.id);
      if (o.ary[n]&&n!=o.n){
       o.ud=n>o.n?1:-1;
       rotate(o,n);
      }
     }
    }
    
    function Auto(id,ms){
     var o=rotate[id];
     if (o){
      o.to=setTimeout(function(){ rotate(o,true); },ms||200);
     }
    }
    
    function Pause(id){
     var o=rotate[id];
     if (o){
      clearTimeout(o.to);
     }
    }
    
    function init(o){
     var id=o.ParentID,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
     if (p){
      o.ary=ByClass(p,o.ClassName);
      if (o.ary[1]){
       o.id=id;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.hold=typeof(hold)=='number'&&hold>20?hold+o.ms:o.ms*4;
       o.n=0;
       o.ud=1;
       o.lgth=o.ary.length-1;
       rotate[id]=o;
       rotate(o,true);
       typeof(srt)=='number'&&srt>20?Auto(id,srt):null;
      }
     }
    }
    
    function rotate(o,a){
    //get current message index (to show it):
     Pause(o.id);
     o.ary[o.n].obj.style.zIndex="0" //hide previous message
     o.ary[o.n].animate(100,0,o.ms);
     var n=o.n;
     n=a===true?n+o.ud:a;
     n=n<0?o.lgth:n>o.lgth?0:n
     o.ary[n].obj.style.zIndex="1" //show current message
     o.ary[n].animate(0,100,o.ms);
     o.n=n;
     a===true?Auto(o.id,o.hold):null;
    }
    
    function ByClass(obj,cls){
     var alltags=obj.getElementsByTagName("*")
     for (var ary=[],i=0; i<alltags.length; i++){
      if (alltags[i].className==cls){
       zxcOpacity(alltags[i],ary.length==0?100:0);
       ary.push(new zxcAnimate('opacity',alltags[i],0));
      }
     }
     return ary;
    }
    
    window.onload=function(){
    
     init({
      ParentID:'ss',
      ClassName:'dyncontent',
      Animate:1000,
      AutoHold:4000,
      AutoStart:1000
     });
    }
    
    </script>
    HTML:
    <img src="../StdImages/1.gif" width="50" height="50" border="1" onmouseup="GoTo('ss',0);" />
    <img src="../StdImages/2.gif" width="50" height="50" border="1" onmouseup="GoTo('ss',1);" />
    <img src="../StdImages/3.gif" width="50" height="50" border="1" onmouseup="GoTo('ss',2);" />
    <img src="../StdImages/4.gif" width="50" height="50" border="1" onmouseup="GoTo('ss',3);" />
    <img src="../StdImages/5.gif" width="50" height="50" border="1" onmouseup="Next('ss',1);" />
    <img src="../StdImages/6.gif" width="50" height="50" border="1" onmouseup="Next('ss',-1);" />
    <div id="ss" style="position:relative;" onmouseover="Pause('ss');" onmouseout="Auto('ss');" >
    <img class="dyncontent" src="../StdImages/1.gif" />
    <img class="dyncontent" src="../StdImages/2.gif" />
    <img class="dyncontent" src="../StdImages/3.gif" />
    <img class="dyncontent" src="../StdImages/4.gif" />
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Bitzu (12-22-2013)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •