Hi All, I'm a bit of a novice with javascript, so please be patient with me. I've created a function that basically takes an array of images and rotates them on a web page. What I want to do is change this code to a Class, so I can create multiple instances of the class and therefore run multiple instances of it on the same web page.
Here is the current code that I have, which works absolutely fine and have had no problems with. I'm showing you this, so you have an idea of what I trying to convert to a class and that you are seeing real working code to start with. This code is called from the web page as an Event as follows: Event.observe(window, "load", function() { ImageRotater.init(iTrn,'imgTran'); }); [1 CODE START] var iTrn=new Array(); iTrn[0]=new Image(387,336); iTrn[0].src="/images/cigar_and_snuff/ transitions/transition_8.jpg"; iTrn[1]=new Image(387,336); iTrn[1].src="/images/cigar_and_snuff/ transitions/transition_2.jpg"; iTrn[2]=new Image(387,336); iTrn[2].src="/images/cigar_and_snuff/ transitions/transition_3.jpg"; iTrn[3]=new Image(387,336); iTrn[3].src="/images/cigar_and_snuff/ transitions/transition_4.jpg"; iTrn[4]=new Image(387,336); iTrn[4].src="/images/cigar_and_snuff/ transitions/transition_5.jpg"; iTrn[5]=new Image(387,336); iTrn[5].src="/images/cigar_and_snuff/ transitions/transition_6.jpg"; iTrn[6]=new Image(387,336); iTrn[6].src="/images/cigar_and_snuff/ transitions/transition_7.jpg"; iTrn[7]=new Image(387,336); iTrn[7].src="/images/cigar_and_snuff/ transitions/transition_1.jpg"; var ImageRotater = function() { var step = 0; var fadestep = 0; var timer; var fotimer; var fitimer; var l, im; return { init:function(ia,d) { l = $(d); im = ia; setTimeout("ImageRotater.imgFadeOut()",5000); }, imgFadeOut:function() { clearInterval(fotimer); fadestep = l.getStyle('opacity'); if (fadestep <= 0) { ImageRotater.imgTrans(); return; } fadestep -= 0.02; l.setOpacity(fadestep); fotimer = setInterval("ImageRotater.imgFadeOut()",50); }, imgTrans:function() { clearInterval(timer); if (step >= im.length) step=0; l.setOpacity(0.0); l.src=im[step].src; l.show(); step++; ImageRotater.imgFadeIn(); }, imgFadeIn:function() { clearInterval(fitimer); fadestep = l.getStyle('opacity'); if (fadestep >= 1) { timer = setInterval("ImageRotater.imgFadeOut()",5000); return; } fadestep += 0.02; l.setOpacity(fadestep); fitimer = setTimeout("ImageRotater.imgFadeIn()",50); } }; }(); [1 CODE END] So that's the working code. Now I want to convert this to a working class using Prototype 1.6.0.3. This is what I have so far and this code is called on the webpage as an event as follows: Event.observe(window, "load", function() { var t = new RotateImages(ihTrn,'imgTran'); t.imgFadeOut(); }); I know that when the following line is executed, within the class, nothing happens: this.fotimer = setInterval("this.imgFadeOut",50); If I change this line to the following: this.fotimer = setInterval("this.imgFadeOut()",50); Then it reports that this.imgFadeOut() is not a function. [2 CODE START] var RotateImages = Class.create({ initialize: function(i,d) { this.step=0; this.fadestep=0; this.timer; this.fotimer; this.fitimer; this.l=d; this.im=i; }, imgFadeOut: function() { clearInterval(this.fotimer); this.fadestep = $(this.l).getStyle('opacity'); if (this.fadestep <= 0) { this.imgTrans; } else { this.fadestep -= 0.02; $(this.l).setOpacity(this.fadestep); this.fotimer = setInterval("this.imgFadeOut",50); } }, imgTrans: function() { clearInterval(this.timer); if (this.step >= this.im.length) this.step=0; $(this.l).setOpacity(0.0); $(this.l).src=im[this.step].src; $ (this.l).show(); this.step++; this.imgFadeIn; }, imgFadeIn: function() { clearInterval(this.fitimer); this.fadestep = $(this.l).getStyle('opacity'); if (this.fadestep >= 1) { this.timer = setInterval("this.imgFadeOut", 5000); } else { this.fadestep += 0.02; $(this.l).setOpacity(this.fadestep); this.fitimer = setTimeout("this.imgFadeIn",50); } } }); [2 CODE END] Any ideas how I can get round this problem, or even if it's possible to do what I'm trying to do with this class? Many thanks for your help! Regards, Kevin --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---