text over image changing

**earfun** · 09-07-2013, 05:27 AM

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

**vwphillips** · 09-07-2013, 10:58 AM

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>