Results 1 to 2 of 2

Thread: Continuous Reel Slideshow - Image Mapping??

  1. #1
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Continuous Reel Slideshow - Image Mapping??

    1) Script Title:
    Continuous Reel Slideshow

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...lslideshow.htm

    3) Describe problem:
    Is there anyway to image map the images in the slideshow? I am only using 4 images, but want to link 5 different parts of that one image? Is that possible to do with this code? Or is there a better code out there that I should be using?

    Thanks!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    It would be difficult to modify that script.

    but I have made this with the images defined in the HTML code so you can add image maps as required

    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[*/
    #tst {
      position:absolute;left:100px;top:100px;width:220px;height:170px;border:solid red 1px;
    }
    
    #tst DIV{
      width:220px;height:170px;background-Color:red;
    }
    .s{
      width:220px;height:170px;float:left;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="tst" >
      <a href="#" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></a>
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
    </div>
    <input id="b1" type="button" name="" value="Next" />
    <input id="b2" type="button" name="" value="Pevious" />
    <input type="button" name="" value="GoTo 0" onmouseup="zxcStepCarousel.GoTo('tst',0);"/>
    <input type="button" name="" value="GoTo 1" onmouseup="zxcStepCarousel.GoTo('tst',1);"/>
    <input type="button" name="" value="GoTo 2" onmouseup="zxcStepCarousel.GoTo('tst',2);"/>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Step Carousel (30-November-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    //  The functional code size is 4.96K
    
    var zxcStepCarousel={
    
     init:function(o){
      var obj=document.getElementById(o.ID),ld=o.LoadDuration;
      if (obj){
       var clds=obj.childNodes,iary=[],img,cnt=0,z0=0;
       for (var z0=0;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         img=clds[z0].nodeName.toUpperCase()=='IMG'?clds[z0]:clds[z0].getElementsByTagName('IMG')[0];
         if (img){
          iary[cnt]=[clds[z0],img,new Image()];
          iary[cnt][2].src=img.src;
          cnt++;
         }
        }
       }
       o.obj=obj;
       this.load(o,iary,new Date(),(typeof(ld)=='number'&&ld>0?ld:5)*1000);
      }
     },
    
     load:function(o,iary,d,ms){
      for (var oop=this,z0=0;z0<iary.length;z0++){
       if (iary[z0][2].width<40&&new Date()-d<ms){
        o.to=setTimeout(function(){ oop.load(o,iary,d,ms); },100);
        return;
       }
      }
      for (z0=0;z0<iary.length;z0++){
       if (iary[z0][2].width<40){
        o.obj.removeChild(iary[z0][0])
        iary.splice(z0,1);
        z0--;
       }
      }
      var obj=o.obj,id=obj.id,mde=o.Mode,ms=o.SlideDuration,hold=o.HoldDelay,srt=o.AutoStart,ud=o.Direction,days=o.DaysPersistence,n=document.getElementById(o.NextID),b=document.getElementById(o.BackID),w=this.int(obj,'width'),h=this.int(obj,'height'),mde=typeof(mde)=='string'&&mde.charAt(0)=='V'?['top','left',h]:['left','top',w],ms=typeof(ms)=='number'&&ms>20?ms:1000,days=typeof(days)=='number'?days:typeof(days)=='session'?'s':-1,nu=(this.cookie(id+'=')||1)*1,slide=document.createElement('DIV'),img,div,div0,ds=[],p,ary=[0,0],lgth,z2=0;;
      obj.style.overflow='hidden';
      document.body.appendChild(slide);
      slide.style.position='absolute';
      for (var z2=0;z2<iary.length;z2++){
       img=iary[z2][1];
       div=slide.cloneNode(false);
       ds.push(div);
       p=mde[2]*ds.length;
       ary[ds.length]=p;
       div.style[mde[0]]=p+'px';
       div.style[mde[1]]='0px';
       div.style.width=w+'px';
       div.style.height=h+'px';
       div.appendChild(iary[z2][0]);
       slide.appendChild(div);
       img.style.position='absolute';
       img.style.left=(w-img.width)/2+'px';
       img.style.top=(h-img.height)/2+'px';
      }
      p+=mde[2];
      ary.push(p);
      div0=ds[0].cloneNode(true);
      div0.style[mde[0]]=p+'px';
      slide.appendChild(div0);
      div=div.cloneNode(true);
      div.style[mde[0]]='0px';
      slide.appendChild(div)
      slide.style[mde[0]]=-ary[nu]+'px';
      obj.appendChild(slide);
      lgth=ary.length-1;
      nu=ary[nu]?nu:1;
      o=zxcStepCarousel['zxc'+id]={
       id:id,
       obj:obj,
       mde:mde[0],
       slide:slide,
       ary:ary,
       lgth:lgth,
       mve:ary[lgth-1],
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*4,
       ud:typeof(ud)=='number'&&ud<0?-1:1,
       cnt:nu,
       now:-ary[nu],
       days:days
      }
      this.addevt(slide,'mouseover','Pause',id);
      this.addevt(obj,'mouseout','Auto',id);
      if (n){
       this.addevt(n,'mouseup','Next',id,1);
      }
      if (b){
       this.addevt(b,'mouseup','Next',id,-1);
      }
      if (typeof(srt)=='number'){
       this.Auto(id,srt);
      }
     },
    
     Next:function(id,ud){
      var o=zxcStepCarousel['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       this.rotate(o,o.cnt+ud);
      }
     },
    
     GoTo:function(id,nu){
      var o=zxcStepCarousel['zxc'+id],nu=typeof(nu)=='number'?nu+1:-1;
      if (o&&nu>0&&nu<o.lgth){
       this.rotate(o,nu);
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=zxcStepCarousel['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||500);
      }
     },
    
     Pause:function(id){
      var o=zxcStepCarousel['zxc'+id];
      if (o){
       o.auto=false;
       clearTimeout(o.to);
      }
     },
    
     rotate:function(o,nu){
      clearTimeout(o.to);
      o.auto=nu===true;
      nu=o.auto?o.cnt+o.ud:nu;
      var now=o.now;
      if (nu>o.lgth||nu<0){
       now+=o.mve*(nu<0?-1:1);
       nu=nu<0?o.lgth-2:2;
      }
      if (typeof(o.ary[nu])=='number'&&nu!=o.cnt){
       clearTimeout(o.dly);
       this.animate(o,now,-o.ary[nu],new Date(),o.ms);
       o.cnt=nu;
       document.cookie=o.id+'='+(nu==o.lgth?1:nu==0?lgth-1:nu)+';'+(typeof(o.days)=='number'?'expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/':'');
      }
     },
    
     animate:function(o,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       o.now=now;
       o.slide.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.slide.style[o.mde]=t+'px';
       if (o.auto){
        oop.Auto(o.id,o.hold);
       }
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     },
    
     int:function(o,p){
      return parseInt(this.style(o,p));
     },
    
     style:function(o,p){
      if (o.currentStyle){
       return o.currentStyle[p.replace(/-/g,'')];
      }
      return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'[^;]+','i');
      if (document.cookie.match(re)){
       return document.cookie.match(re)[0].split("=")[1];
      }
      return null
     }
    
    
    }
    
    zxcStepCarousel.init({
     ID:'tst',           // the unique ID name of the parent DIV.                                       (string)
     Mode:'Horizontal',  //(optional) the mode of execution, 'Horizontal' or 'Vertical'.                (string, default = 'Horizontal')
     SlideDuration:500,  //(optional) the slide duration in milli seconds.                              (number, default = 1000)
     HoldDelay:1500,     //(optional) the auto rotate hold delay in milli seconds.                      (number, default = SlideDuration*4)
     AutoStart:2000,     //(optional) the autimatic auto rotate start delay in milli seconds.           (number, default = no autimatic start)
     Direction:1,        //(optional) the slide direction, 1 = anti clockwise, -1 clockwise.            (number, default = 1 = anti clockwise)
     NextID:'b1',        //(optional) the unique ID name of the element to rotate once anti clockwise.  (string, default = no event added to an element)
     BackID:'b2',        //(optional) the unique ID name of the element to rotate once clockwise.       (string, default = no event added to an element)
     LoadDuration:2000,  //(optional) the time allowed to load images in seconds.                       (number, default = 5)
     DaysPersistence:1   //(optional) number = the number of days to restore the framed element.        (number, default = no persistence)
                         //(optional) 'session' = the restore the last framed element for the session.  (string, default = no persistence)
    });
    /*]]>*/
    </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/

Similar Threads

  1. Continuous Reel Slideshow - Stop at Last Image?
    By vlane95678 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 10-11-2012, 11:25 PM
  2. Image sizing in Continuous Reel Slideshow
    By erdem in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-07-2012, 07:42 PM
  3. Continuous Reel Slideshow
    By chadlexmorgan in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-12-2011, 04:39 PM
  4. Continuous Reel Slideshow
    By JonBoatw in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-12-2011, 03:17 PM
  5. Continuous Reel Slideshow - More than one image visible
    By mitja in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-16-2010, 05:44 AM

Bookmarks

Posting Permissions

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