Results 1 to 3 of 3

Thread: text over image changing

  1. #1
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default text over image changing

    I'm trying to create a web which has images changing for a front page and there are a pharagraph over it. Do guys know where i could find the script?
    I want to be like these websites bikafurniture.com or saniharto.com
    Last edited by djr33; 09-07-2013 at 06:33 AM. Reason: remove hotlinks

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    with a little bit of CSS you could do this with any slide show

    but

    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">
    <!--
    
    #tst {
      position:relative;left:100px;top:100px;width:400px;height:300px;border:solid red 1px;
    }
    
    #tst IMG {
      width:400px;height:300px;
    }
    
    .mask {
      position:absolute;z-Index:4;left:50px;top:50px;width:200px;height:100px;background-Color:#99FFFF;text-Align:center;font-Size:20px;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    
    -->
    </style></head>
    
    <body>
     <div id="tst" >
      <img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image">
      <img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image">
      <img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="image">
      <div class="mask" >Your Content</div>
     </div>
    
    <script type="text/javascript">
    <!--
    // Simple Fade/Slide Slide Show. (07-September-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    /*
    
     **** Controlling the Script.
      The script may be controlled by inline event calls.
    
      ** Function Next.
       Function Next will display the next or previous slide show frame.
       e.g.
        <input type="button" name="" value="Next" onmouseup="zxcFadeSlideShow.Next('i1',1);" >
        <input type="button" name="" value="Back" onmouseup="zxcFadeSlideShow.Next('i1',-1);" >
       where:
        paramter 0 = the unique ID name of the featured image. (string)
        paramter 1 = 1 = display the next image, -1 display the previous image. (number)
    
      ** Function GoTo.
       Function GoTo will display a specified image specified by index number.
       e.g.
        <input type="button" name="" value="GoTo 0" onmouseup="zxcFadeSlideShow.GoTo('i1',0);" >
        <input type="button" name="" value="GoTo 1" onmouseup="zxcFadeSlideShow.GoTo('i1',1);" >
       where:
        paramter 0 = the unique ID name of the featured image. (string)
        paramter 1 = index number of the specified image.      (number)
    
      ** Function Auto.
       Function Auto will auto rotate the slide show images.
       e.g.
        <input type="button" name="" value="Auto" onmouseup="zxcFadeSlideShow.Auto('i1');" >
       where:
        paramter 0 = the unique ID name of the featured image. (string)
    
      ** Function Pause.
       Function Pause will pause auto rotation of the slide show images.
       e.g.
        <input type="button" name="" value="Pause" onmouseup="zxcFadeSlideShow.Pause('i1');" >
       where:
        paramter 0 = the unique ID name of the featured image. (string)
    
    */
    
    var zxcFadeSlideShow={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       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.ParentID,ud=o.Direction,ms=o.Animate,add=o.AddEvents,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id),add=add instanceof Array?add:[];
      if (p){
       var clds=this.bycls(o.FrameClass,p),ms=typeof(ms)=='number'&&ms>0?ms:1000,ary=[],obj,t,z0=0,z1=0;
       for (;z0<clds.length;z0++){
        clds[z0].style.position='absolute';
        clds[z0].style.zIndex=z0>0?'0':'1';
        clds[z0].style.top=clds[z0].style.left='0px';
        ary[z0]=[clds[z0],'',z0>0?0:100];
        this.opac(clds[z0],z0>0?0:100);
       }
       for (;z1<add.length;z1++){
        if (add[z1]&&add[z1][0]){
         obj=document.getElementById(add[z1][0]);
         if (obj&&this[add[z1][2]]){
          t=add[z1][1];
          this.addevt(obj,t=='click'||t=='mouseover'||t=='mouseout'||t=='mousedown'?t:'mouseup',add[z1][2],id,add[z1][3]);
         }
        }
       }
       o.id=id;
       o.ary=ary;
       o.ud=typeof(ud)=='number'&&ud<0?-1:1;
       o.ms=ms;
       o.s=o.OnAnimate;
       o.f=o.OnComplete;
       o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
       o.n=0;
       this['zxc'+id]=o;
       typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,auto){
      clearTimeout(o.to);
      var n=o.n,a=o.ary[n],lgth=o.ary.length-1;
      a[0].style.zIndex='0';
      this.animate(o,a,a[2],0,new Date(),o.ms);
      o.auto=auto===true;
      n=o.auto?n+o.ud:auto;
      n=n>lgth?0:n<0?lgth:n;
      typeof(o.s)=='function'?o.s(n):null;
      a=o.ary[n];
      a[0].style.zIndex='1';
      this.animate(o,a,a[2],100,new Date(),o.ms);
      o.n=n;
     },
    
     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)){
       a[2]=Math.floor(n);
       oop.opac(a[0],a[2]);
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=t;
       oop.opac(a[0],t);
       typeof(o.f)=='function'?o.f(n):null;
       t==100&&o.auto?oop.Auto(o.id,o.hold):null;
      }
     },
    
     bycls:function (nme,el){
      for (var els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
        if ((' '+els[z0].className+' ').match(' '+nme+' ')){
        ary.push(els[z0]);
       }
      }
      return ary;
     },
    
     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;
     },
    
      addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcFadeSlideShow.init({
     ParentID:'tst',      // the unique ID name of the parent DIV.                                    (string)
     FrameClass:'frame',  // the common class name of the slide show frames.                          (string)
     Animate:500,         //(optional) the animation duration in milli sceconds.                      (number, default = 1000)
     Direction:-1,        //(optional) the initial auto rotation direction, >0 = forward, < o = back. (number, default = 1 = forward)
     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)
     AddEvents:[          //(optional) an array defining the event calls to add.                      (array, default = inline event calls)
      // field 0 = the unique ID name of the element.
      // field 1 = the event type.
      // field 2 = the function name.
      // field 3 = (optional) the parameter to pass to the function.
      ['tst','mouseover','Pause'],
      ['tst','mouseout','Auto']
     ],
     OnAnimate: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/

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

    earfun (09-07-2013)

  4. #3
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    thank you very much

Similar Threads

  1. changing image and text on mouse using JS
    By emanuelle in forum JavaScript
    Replies: 3
    Last Post: 10-14-2010, 03:36 PM
  2. Changing Title Text Font and Position using Image Thumbnail viewer
    By gazza1234 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-17-2010, 09:26 AM
  3. changing bio text
    By justinchrono in forum HTML
    Replies: 3
    Last Post: 03-17-2010, 01:10 AM
  4. dynamically changing the value of text box
    By sweetline priya in forum PHP
    Replies: 0
    Last Post: 01-09-2009, 07:57 AM
  5. Text Changing At Certain Time Of Day
    By SChaput in forum PHP
    Replies: 3
    Last Post: 11-16-2008, 05:31 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
  •