fae-in sample and homepage

**cathalob** · 07-10-2009, 02:21 PM

Hi, I put up a question a short while ago and do not know if I made much sense, so I have uploaded the homepage and a link under idea1 to the fade-in images.
What i need to do is replace the rollover images on the homepage with the fade-in presentation, but as I mentioned this morning, it does not seem to want to be pasted in

Any ideas? the link is:

www.visualephotography.ie

Cathal

**vwphillips** · 07-10-2009, 04:22 PM

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;width:398px;height:241px;
}

#tst IMG {
  position:absolute;width:398px;height:241px;
}
/*]]>*/
</style><script  type="text/javascript">
/*<![CDATA[*/

function Swap(){
 var evt=window.event||arguments.callee.caller.arguments[0];
 var obj=window.event?evt.srcElement:evt.target;
 if(obj.nodeType==3) obj=obj.parentNode;
 obj.src=evt.type=='mouseover'?obj.src.replace('off.','over.'):obj.src.replace('over.','off.');
}
/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (14-May-2009)
// 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 and an optional 'Bounce'.

// **** Application Notes

// notes removed to allow posting


// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj) return;
 var oop=obj[mde.replace(/\W/g,'')+'oop'];
 if (oop){
  if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
  else oop.update([srt,fin],ms,scale,curve);
 }
 else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
 return oop;
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/\W/g,'');
 this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
 clearTimeout(this.to);
 this.time=ms||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.ms=this.mS;
 this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
 this.ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
 this.apply();
 if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Bounce&&this.Bounce[2]>0) this.bounce();
 }
}

zxcBAnimatorOOP.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

zxcBAnimatorOOP.prototype.bounce=function(){
 if (this.Bounce[2]%2==0)
 this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
 this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
 this.Bounce[2]--;
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Fade(id,ms){
 var imgs=document.getElementById(id).getElementsByTagName('IMG');
 this.nu=imgs.length-1;
 this.imgs=[];
 for (var oop,z0=0;z0<=this.nu;z0++) this.imgs[z0]=zxcBAnimator('opacity',imgs[z0],50,z0<this.nu?0:100,10);
 this.ms=ms||0;
}

Fade.prototype.Fade=function(nu){
 if (this.imgs[nu]){
  this.imgs[this.nu].update([this.imgs[this.nu].data[0],0],this.ms,[0,100]);
  this.imgs[this.nu].obj.style.zIndex='0';
  this.nu=nu;
  this.imgs[this.nu].update([this.imgs[this.nu].data[0],100],this.ms,[0,100]);
  this.imgs[this.nu].obj.style.zIndex='1';
 }
}

/*]]>*/
</script>
</head>

<body onload="F1=new Fade('tst',1000);" >
<table width="690" border="0" cellpadding="0" cellspacing="0" id="tablePresentation">
      <tr>
        <td width="16" height="289" id="Greysidebar">&nbsp;</td>
        <td width="10" id="tdBlacksidebar">&nbsp;</td>
        <td width="638"><table width="638" border="0" cellpadding="0" cellspacing="0" id="tdhomerollovertable">
          <tr>
            <td colspan="4" id="tdhomerolloverblack">&nbsp;</td>

          </tr>
          <tr>
            <td rowspan="3" id="tdhomemainimage">
            <div id="tst" >
             <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
             <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" />
             <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" />
             <img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" />
             <img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" />
             <img src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" />
             <img src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" />
             <img src="http://www.vicsjavascripts.org.uk/StdImages/Eight.gif" />
             <img src="http://www.vicsjavascripts.org.uk/StdImages/Nine.gif" />
             <img src="http://www.visualephotography.ie/images/img_blank.jpg" name="img_blank" width="398" height="241" id="img_blank" />
            </div>
            </td>
            <td id="tdhomerollverimages"><img onmouseover="Swap();F1.Fade(0);"  onmouseout="Swap()" src="http://www.visualephotography.ie/images/rollover_1_off.gif" name="rollover_img1" width="80" height="80" border="0" id="rollover_img1" /></td>
            <td id="tdhomerollverimages"><img onmouseover="Swap();F1.Fade(1);"  onmouseout="Swap()" src="images/rollover_2_off.gif" name="rollover_img2" width="80" height="80" border="0" id="rollover_img2" /></td>
            <td id="tdhomerollverimages"><img onmouseover="Swap();F1.Fade(2);"  onmouseout="Swap()" src="images/rollover_3_off.gif" name="rollover_img3" width="80" height="80" border="0" id="rollover_img3" /></a></td>
          </tr>
          <tr>
            <td id="tdhomerollverimages"><img  onmouseover="Swap();F1.Fade(3);"  onmouseout="Swap()" src="images/rollover_4_off.gif" name="rollover_img4" width="80" height="80" border="0" id="rollover_img4" /></td>

            <td id="tdhomerollverimages"><img onmouseover="Swap();F1.Fade(4);"  onmouseout="Swap()" src="images/rollover_5_off.gif" name="rollover_img5" width="80" height="80" border="0" id="rollover_img5" /></td>
            <td id="tdhomerollverimages"><img onmouseover="Swap();F1.Fade(5);"  onmouseout="Swap()" src="images/rollover_6_off.gif" name="rollover_img6" width="80" height="80" border="0" id="rollover_img6" /></td>
          </tr>
          <tr>
            <td height="80" id="tdhomerollverimages"><img onmouseover="Swap();F1.Fade(6);"  onmouseout="Swap()" src="images/rollover_7_off.gif" name="rollover_img7" width="80" height="80" border="0" id="rollover_img7" /></td>
            <td id="tdhomerollverimages"><img onmouseover="Swap();F1.Fade(7);"  onmouseout="Swap()" src="images/rollover_8_off.gif" name="rollover_img8" width="80" height="80" border="0" id="rollover_img8" /></td>
            <td id="tdhomerollverimages"><img onmouseover="Swap();F1.Fade(8);"  onmouseout="Swap()" src="images/rollover_9_off.gif" name="rollover_img9" width="80" height="80" border="0" id="rollover_img9" /></td>
          </tr>
          <tr>

            <td colspan="4" id="tdhomerolloverblack">&nbsp;</td>
          </tr>
        </table>
</body>

</html>

Thread: fae-in sample and homepage

Thread Tools

Search Thread

fae-in sample and homepage

Bookmarks

Bookmarks

Posting Permissions