Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Looking for the following image slider..

  1. #1
    Join Date
    Jul 2010
    Posts
    64
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default Looking for the following image slider..

    Dear all,

    I am looking for an image slider script in which large images have several clickable sections that link to different pages of my website.

    This, shows the type of slider I like and the clickable sections are represented by big dots. I however, prefer to have the clickable sections not to be visible, you should only see that the link is clickable when you hold your cursor on the image. This is another example (although made in flash).

    I hope someone can help me to find a good script. Thanks a lot in advance,
    Rosalie

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 414 Times in 408 Posts

    Default

    the first example has circle 'elements' to indicate the 'click' area.
    the second example changes the cursor to a pointer over a polygon area to indicate the 'click' area.

    which do you prefer?
    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/

  3. #3
    Join Date
    Jul 2010
    Posts
    64
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    the first example has circle 'elements' to indicate the 'click' area.
    the second example changes the cursor to a pointer over a polygon area to indicate the 'click' area.

    which do you prefer?
    Thanks for your reply, I prefer the second example, so the cursor that changes to a pointer.

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 414 Times in 408 Posts

    Default

    in principle

    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:relative;left:200px;top:50px;width:360px;height:270px;border:solid red 1px;
    }
    
    #tst IMG{
      position:absolute;left:0px;top:0px;width:360px;height:270px;border-Width:0px;
    }
    /*]]>*/
    </style></head>
    
    <body>
    
     <div id="tst" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img"  usemap="#tstmap"/>
     </div>
    <input type="button" name="" value="Next" onmouseup="M1.Next(1);" >
    <input type="button" name="" value="Previous" onmouseup="M1.Next(-1);" >
    
    
     <map id="map1" name="tstmap">
     </map>
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Map Slide Show  (09-April-2011) DRAFT
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcMapSlideShow(o){
     var obj=document.getElementById(o.ID),map=document.getElementById(o.MapID),mapimg=obj.getElementsByTagName('IMG')[0],iary=o.ImageArray,z0=0,z0a,img,ary=[];
     mapimg.style.zIndex='10';
     for (;z0<iary.length;z0++){
      img=document.createElement('IMG');
      img.src=iary[z0][0];
      img.style.zIndex=z0>0?'0':'1';
      obj.appendChild(img);
      ary[z0]=[img,[]];
      for (z0a=0;z0a<iary[z0][1].length;z0a++){
       ary[z0][1].push(iary[z0][1][z0a]);;
      }
     }
     this.ary=ary;
     this.cnt=0;
     this.map=map;
     this.area(0);
    }
    
    zxcMapSlideShow.prototype={
    
     Next:function(ud){
      var ary=this.ary,cnt=this.cnt+(typeof(ud)=='number'&&ud<0?-1:1),lgth=ary.length-1
      cnt=cnt<0?lgth:cnt>lgth?0:cnt;
      ary[this.cnt][0].style.zIndex='0';
      ary[cnt][0].style.zIndex='1';
      this.cnt=cnt;
      this.area(cnt);
     },
    
     area:function(nu){
      var ary=this.ary[nu],map=this.map,z0=0,area,lgth;
      while (map.firstChild){
       map.removeChild(map.firstChild);
      }
      for (;z0<ary[1].length;z0++){
       area=document.createElement('AREA');
       lgth=ary[1][z0][0].length;
       area.shape=lgth==3?'circle':lgth==4?'rect':'poly';
       area.coords=ary[1][z0][0];
       if (ary[1][z0][1]){
        area.href=ary[1][z0][1];
       }
       if (ary[1][z0][2]){
        area.alt=ary[1][z0][2];
       }
       map.appendChild(area);
      }
     }
    
    }
    
    M1=new zxcMapSlideShow({
     ID:'tst',
     MapID:'map1',
     ImageArray:[
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',[[[241,195,21],'#','area4'],[[85,86,131,120],'#','area5']]]
     ]
    });
    
    
    /*]]>*/
    </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/

  5. The Following User Says Thank You to vwphillips For This Useful Post:

    Rosalie (04-09-2011)

  6. #5
    Join Date
    Jul 2010
    Posts
    64
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    in principle
    Thank you very much! I will start "playing" with it and see if I understand how everything works!

  7. #6
    Join Date
    Jul 2010
    Posts
    64
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default

    I think the image slider works great. It is exactly what I was looking for.

    I do have a question left. I made my own previous and next buttons which I want to be displayed in front of the slider (so over the images and exactly on the border, just like in the first example) .
    However, when I try to get them in front of the slider they disappear and I also have no clue how to exactly align them in the middle of the slider.

    Thanks again for the help.
    Rosalie

  8. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 414 Times in 408 Posts

    Default

    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[*/
    
    .tstparent {
      position:relative;left:200px;top:50px;width:360px;height:270px;border:solid red 1px;
    }
    
    .tstparent IMG {
      position:absolute;left:1px;top:120px;
    }
    
    #tst {
      position:relative;left:0px;top:0px;width:360px;height:270px;
    }
    
    #tst IMG{
      position:absolute;left:0px;top:0px;width:360px;height:270px;border-Width:0px;
    }
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    // Animate (11-January-2010)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // **** 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;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 1 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code(1.52K) - NO NEED to Change
    
    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();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime;
      this.data[0]=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]);
      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);
      }
     },
    
     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]=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>
    
    
    
    </head>
    
    <body>
    
     <div class="tstparent" >
      <div id="tst" >
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img"  usemap="#tstmap"/>
      </div>
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" alt="next" onmouseup="M1.Next(1);" />
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" alt="previous" style="left:340px;" onmouseup="M1.Next(-1);" />
     </div>
    
    
     <map id="map1" name="tstmap">
     </map>
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Map Slide Show  (10-April-2011) DRAFT
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcMapSlideShow(o){
     var obj=document.getElementById(o.SlideShowID),map=document.getElementById(o.ImageMapID),mapimg=obj.getElementsByTagName('IMG')[0],iary=o.ImageArray,z0=0,z0a,img,ary=[],ms=o.SlideSpeed;
     obj.style.overflow='hidden';
     mapimg.style.zIndex='10';
     for (;z0<iary.length;z0++){
      img=document.createElement('IMG');
      img.src=iary[z0][0];
      img.style.position='absolute';
      img.style.zIndex=z0>0?'0':'1';
      img.style.left='0px';
      img.style.top='0px';
      img.style.width='100%';
      img.style.height='100%';
      obj.appendChild(img);
      ary[z0]=[new zxcAnimate('left',img),[]];
      for (z0a=0;z0a<iary[z0][1].length;z0a++){
       ary[z0][1].push(iary[z0][1][z0a]);;
      }
     }
     this.sz=obj.offsetWidth+5;
     this.ary=ary;
     this.pre=ary[0];
     this.lst=ary[0];
     this.cnt=0;
     this.ms=typeof(ms)=='number'?ms:1000;
     this.map=map;
     this.area(0);
    }
    
    zxcMapSlideShow.prototype={
    
     Next:function(ud){
      var ary=this.ary,cnt=this.cnt+(typeof(ud)=='number'&&ud<0?-1:1),lgth=ary.length-1
      cnt=cnt<0?lgth:cnt>lgth?0:cnt;
      this.pre[0].obj.style.zIndex='0';
      this.lst[0].obj.style.zIndex='1';
      this.pre=this.lst;
      ary[cnt][0].obj.style.zIndex='2';
      ary[cnt][0].animate(this.sz*-ud,0,this.ms,[0,this.sz]);
      this.lst=ary[cnt];
      this.cnt=cnt;
      this.area(cnt);
     },
    
     area:function(nu){
      var ary=this.ary[nu],map=this.map,z0=0,area,lgth;
      while (map.firstChild){
       map.removeChild(map.firstChild);
      }
      for (;z0<ary[1].length;z0++){
       area=document.createElement('AREA');
       lgth=ary[1][z0][0].length;
       area.shape=lgth==3?'circle':lgth==4?'rect':'poly';
       area.coords=ary[1][z0][0];
       if (ary[1][z0][1]){
        area.href=ary[1][z0][1];
       }
       if (ary[1][z0][2]){
        area.alt=ary[1][z0][2];
       }
       map.appendChild(area);
      }
     }
    
    }
    
    M1=new zxcMapSlideShow({
     SlideShowID:'tst', // the unique ID name of the slide show parent node.           (string)
     ImageMapID:'map1', // the unique ID name of the image MAP.                        (string)
     ImageArray:[       // an array defining the slide show images and image map data. (array)
      // field 0 = the image src.                                   (string)
      // field 1 = an array of arrays defining the image map data.  (array)
      //    field 0 = the image map area coordinates.         (array)
      //    field 1 = the image map area link href.           (string)
      //    field 2 = the image map area alt attribute value. (string)
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',[[[241,195,21],'#','area4'],[[85,86,131,120],'#','area5']]],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg',[[[241,195,21],'#','area6'],[[85,86,131,120],'#','area7']]]
     ],
     SlideSpeed:500     //(optional) the animation speed in milli seconds.             (number, default = 1000)
    });
    
    
    /*]]>*/
    </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/

  9. #8
    Join Date
    Jul 2010
    Posts
    64
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default

    [QUOTE=vwphillips;251171QUOTE]

    Dear vwphillips,
    thanks for your reply. The buttons now appear on the right place in the div when I view the htmlpage in design mode but when I switch to live view the buttons disappear. I also viewed the page in IE and Firefox and I don't see them.
    Do you have an idea what this can be?
    Thanks again

  10. #9
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 414 Times in 408 Posts

    Default

    I don not understand what you mean by design mode and live view, you could try giving your buttons a z-Index:101

    please post a link to your page
    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/

  11. #10
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    It sounds like you might be using Dreamweaver or some other WYSIWYG editor to have a "design view". Is that right?
    If so, note that most WYSIWYG editors (in addition to often generating nonstandard or problematic code) tend to render pages differently than a browser will. Basically it's just another browser (one embedded in an editor) and it can have the same variation as another browser, but it tends to have more variation because more effort is put into features in the program, not standards compliance. (And because fewer people are beta testing it. That's one reason that open source browsers like Firefox are so good: they have lots of testing and bug fixes.)
    Therefore, What You See Is Kinda Similar to What You Get -- WYSIKSWYG? This means that your design view preview may be wrong (or may falsely appear correct), but all that matters is a preview in a real browser. (And sometimes it can vary slightly with pages on the web and pages viewed locally, so upload to check before finalizing a document. This applies more to scripts than CSS/HTML though.)
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

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
  •