www.webdeveloper.com
Results 1 to 2 of 2

Thread: On click change image and description

  1. #1
    Join Date
    Mar 2013
    Posts
    25

    On click change image and description

    Hi,
    What code is required to change an image and the image description on click?

    So there is an image, with a description below that image. Once the image is clicked, it goes to the next image, and replaces the previous image description with the new image description?

    Does that make sense?

    How can I do this?

    Thank you.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!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">
    <!--
    
    #caption {
      width:200px;border:solid red 1px;
    }
    
    -->
    </style></head>
    
    <body>
    <input type="button" name="" value="Next" onmouseup="zxcSFSlideShow.Next('i1',1);" >
    <input type="button" name="" value="Back" onmouseup="zxcSFSlideShow.Next('i1',-1);" >
    <input type="button" name="" value="GoTo 0" onmouseup="zxcSFSlideShow.Next('i1',0);" >
    <input type="button" name="" value="GoTo 1" onmouseup="zxcSFSlideShow.Next('i1',1);" >
    <input type="button" name="" value="GoTo 2" onmouseup="zxcSFSlideShow.Next('i1',2);" >
    <input type="button" name="" value="Auto" onmouseup="zxcSFSlideShow.Auto('i1');" >
    <input type="button" name="" value="Pause" onmouseup="zxcSFSlideShow.Pause('i1');" >
    <br>
         <a href="" >
          <img id="i1" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" border="0" onmouseover="zxcSFSlideShow.Pause('i1');" onmouseout="zxcSFSlideShow.Auto('i1');">
         </a>
         <div id="caption" >Caption 1</div>
    
    <script type="text/javascript">
    <!--
    // Simplae Fade Slide Show. (14-August-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcSFSlideShow={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       this.rotate(o,o.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o&&o.ary[n]){
       this.rotate(o,n);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ImageID,ary=o.ImageArray,ms=o.FadeDuration,hold=o.AutoHold,srt=o.AutoStart,img=document.getElementById(id),cap=document.getElementById(o.CaptionID);
      if (img&&ary instanceof Array){
       var a=img.parentNode,c=document.createElement('IMG'),ms=typeof(ms)=='number'&&ms>0?ms:1000,z0=0;
       c.style.position='absolute';
       c.style.zIndex='201';
       c.style.left=c.style.top='-3000px';
       document.body.appendChild(c);
       for (;z0<ary.length;z0++){
        ary[z0][5]=new Image();
        ary[z0][5].src=ary[z0][0];
        ary[z0][3]=ary[z0][3]||'';
       }
       o.id=id;
       o.img=img;
       o.a=a.nodeName.toUpperCase()=='A'?a:null;
       o.ary=ary;
       o.c=[c];
       o.ms=ms;
       o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
       o.cap=cap;
       o.n=0;
       this['zxc'+id]=o;
       o.cap?o.cap.innerHTML=o.ary[0][3]:null;
       typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
      }
     },
    
    
     rotate:function(o,auto){
      clearTimeout(o.to);
      var n=o.n,p=this.pos(o.img),lgth=o.ary.length-1;
      o.auto=auto===true;
      n=o.auto?n+1:auto;
      n=n>lgth?0:n<0?lgth:n;
      if (o.ary[n][5].width>40){
       typeof(o.OnFade)=='function'?o.OnFade(n):null;
       o.c[0].src=o.ary[n][5].src;
       o.c[0].style.width=o.img.width+'px';
       o.c[0].style.height=o.img.height+'px';
       this.animate(o,o.c,0,100,new Date(),o.ms);
       o.c[0].style.left=p[0]+'px';
       o.c[0].style.top=p[1]+'px';
       o.a?o.a.removeAttribute('href'):null;
       o.a&&o.ary[n][1]?o.a.href=o.ary[n][1]:null;
       o.img.removeAttribute('title');
       o.ary[n][2]?o.img.title=o.ary[n][2]:null;
       o.cap?o.cap.innerHTML=o.ary[n][3]:null;
       o.n=n;
      }
      else {
       o.ary.splice(n,1);
       o.auto?this.Auto(o.id):null;
      }
     },
    
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       n=Math.max(n,0);
       oop.opac(a[0],n);
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       o.img.src=a[0].src;
       a[0].style.top='-3000px';
       typeof(o.OnComplete)=='function'?o.OnComplete(n):null;
       o.auto?oop.Auto(o.id,o.hold):null;
      }
     },
    
     opac:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     pos:function(o){
      var rtn=[0,0];
      while(o){
       rtn[0]+=o.offsetLeft;
       rtn[1]+=o.offsetTop;
       o=o.offsetParent;
      }
      return rtn;
     }
    
    
    }
    
    zxcSFSlideShow.init({
     ImageID:'i1',       // the unique ID name of the image.                              (string)
     ImageArray:[        // an array of arrays defining the images.                       (array)
      // field 0 = the image scr.
      // field 1 = (optional) the image link href.
      // field 2 = (optional) the image title.
      // field 3 = (optional) the image caption.
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Egypt 1','Caption 1'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Egypt 2','Caption 2'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Egypt 3','Caption 3']
     ],
     CaptionID:'caption', //(optional) the unique ID name of the icaptions element.        (string, default = no captions)
     FadeDuration:500,    //(optional) the fade duration in milli sceconds.                (number, default = 1000)
     AutoHold:2000,       //(optional) the auto rotation hold delay in milli sceconds.     (number, default = FadeDuration*4)
     AutoStart:1000,      //(optional) the auto rotation start  delay in milli sceconds.   (number, default = FadeDuration*4)
     OnFade:function(n){  //(optional) a function to call when starting fade of new image. (function, default = no function)
      // n =the current imasge index.
     },
     OnComplete:function(n){ //(optional) a function to call when fade in is complete.    (function, default = no function)
      // n =the current imasge index.
     }
    });
    
    //-->
    </script>
    </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/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles