Background multiple-image change???

Hi. Newbie here.

I have a website that a friend helps me with (data base etc. that I can never do myself). But he refuses to help me on a specific matter that I really care for, because he thinks the design isn't that important and it's not worth the trouble.

So here it is...

***1***
I have an empty table that repeats in many pages. In each page, the table gets by PHP a different bg-image, plus a set of small size pics; always a different set of pics.

I could put the table inside a div, and have the div carry the bg-image, if it's easier.

***2***
When I click one of the small pics, I want the main table to change its background image with the LARGER version of that small image.

Small and large image can have the same name, but come from different folders, if it's easier.

***3***
I would like the bg-image to change with a fading effect.

***4***
If anyone knows how to do that, but thinks I ask too much, I'm willing to pay (if I can afford it), as I would really need a such function.

Thank you for taking the time to read.
Have a great day.
Best regards.

Steve

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:0px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Five.gif); } /*]]>*/ </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]=(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]=Math.floor(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 id="tst" > <table border="1"> <tr> <td width="100" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" /></td> <td width="100"><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" /></td> </tr> <tr> <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" /></td> <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="50" height="50" /></td> </tr> </table> </div> <script type="text/javascript"> /*<![CDATA[*/ function BG(o){ var obj=document.getElementById(o.ID); var table=obj.getElementsByTagName('TABLE')[0]; table.style.position='relative'; table.style.zIndex='10'; obj.style.width=table.offsetWidth+'px'; var imgs=table.getElementsByTagName('IMG'); this.ary=[]; for (var div,z0=0;z0<imgs.length;z0++){ div=document.createElement('DIV'); div.style.position='absolute'; div.style.visibility='hidden'; div.style.left='0px'; div.style.top='0px'; div.style.width='100%'; div.style.height=obj.offsetHeight+'px'; div.style.backgroundImage='url('+(imgs[z0].src.replace(o.SRCFrom,o.SRCTo))+')'; obj.appendChild(div); this.addevt(imgs[z0],'mouseup','swap',z0); zxcOpacity(div,0); this.ary[z0]=new zxcAnimate('opacity',div,0); } this.ms=o.Duration||1000; this.lst=this.ary[0]; } BG.prototype={ swap:function(nu){ this.lst.obj.style.zIndex='0'; this.lst.animate(this.lst.data[0],0,this.ms); this.lst=this.ary[nu]; this.lst.obj.style.zIndex='1'; this.lst.obj.style.visibility='visible'; this.lst.animate(this.lst.data[0],100,this.ms); }, addevt:function(o,t,f,p){ var oop=this; if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false); else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); }); } } new BG({ ID:'tst', Duration:1000, SRCFrom:'One.gif', SRCTo:'Egypt5.jpg' }); /*]]>*/ </script> </body> </html>

Now, that works beautifully! Thank you very much for your kind help.
Quick one, too.
:D
Happy, here.

One more thing, though. I saw that the bg-image change can be set to take place on mouseOver as well. Which is great. If I keep this setting, is there any way I can achieve the following two things?...

1)
Bg-image change doesn't start right away when mouseOver, but only after mouse stays on the small image for a number of milliseconds.

2)
On mouseOut, the new bg-image should fade out (without delay, this time) and the original bg-image appears again.

... if not both, maybe one of them? I don't want to abuse your time; I know it's not always about good intentions, but also about time. I'm often wondering how you guys find the time to help people around.

Enjoy your day!, and I also thank you for sparing my wallet.
:p