Closed Thread Icon

Topic awaiting preservation: Another @#$%& Fade Problem (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=26392" title="Pages that link to Topic awaiting preservation: Another @#$%&amp;amp; Fade Problem (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Another @#$%&amp; Fade Problem <span class="small">(Page 1 of 1)</span>\

 
Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted posted 08-06-2005 03:01

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.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 08-06-2005 03:28

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;
}


 

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted posted 08-06-2005 06:49

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.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 08-06-2005 07:06

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();}


 

« BackwardsOnwards »

Show Forum Drop Down Menu