Topic awaiting preservation: Another @#$%& Fade Problem (Page 1 of 1)

OK, so the client wants these words to fade in and out when you roll over these thumbnails, right? Well, I figured using Fadomatic would be the quick and easy solution, but now I can't figure out how to use the blasted thing on multiple objects.

Please see this page for my attempt so far. The Fadomatic script is at the top. The object-specific bits are at the bottom, used as prescribed by the Fadomatic page.

I tried using mouse events in each anchor that called the fadeIn and fadeOut functions, but that resulted in a buggy effect when you mouseout before the mouseover fade is done.

Please help this naive, JS-deficient boy.

It looks to me like if you just create a Fadomatic object for each text image you want to fade, and then call fadeIn and fadeOut on the appropriate one for each link on mouseover and mouseout, you'll get the effect you want. Can you describe the "buggy" effect you're getting?

Something like this is what I mean:

for (var i=0; i < 7; ++i)
{
var anchor = document.getElementById("thumb" + i);
var showtext = document.getElementById("thumbtext" + i); // note I changed the ID slightly
var fader = new Fadomatic(showtext, 10, 0);
anchor.onmouseover = fader.fadeIn;
anchor.onmouseout = fader.fadeOut;
}


 

OK, forget the buggy thing I was talking about -- I know now why that wasn't working.

I had to mess with your code for a while, but finally got this to work.

anchor.onmouseover = fader.fadeIn; and its conterpart would never work, though; the fader.fadeIn bit had to go in its own function. Never could get it to work with an array, though (i.e. anchor[i].onmouseover). I'm sure I just don't understand how that works exactly.

Oh... that kind of makes sense. Doing fader.fadeIn() has slightly more meaning than just fader.fadeIn (the former is a function call which is in the context of the fader object, so 'this' refers to fader; the latter is just the function itself but doesn't know what object it's for). This might have worked:

anchor.onmouseover = function() {fader.fadeIn();}