PDA

View Full Version : 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
<!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>