Results 1 to 3 of 3
  1. #1
    Join Date
    Dec 2002
    NY, NY

    javascript -> fading images out.

    Ok basically i have a bunch of links, and when you hover over the link, a picture up top changes.

    The problem is that when you scroll across the links, the pictures change instantly, and it looks like crap

    How can I make it fade out?

    I have this code:

    PHP Code:
    <script language="JavaScript">
    startopacity 0// Set this variable between 1 and 100 as the standard opacity

    function fadeIt(obj,direct){ 
    window.timer) { clearInterval(timer); } 
    timer=setInterval("flowfilter(tobj,drct);",5); }

    dct==1) { if (thing.filters.alpha.opacity<100) { thing.filters.alpha.opacity+=5; } else { clearInterval(timer); } }
    dct==2) { if (thing.filters.alpha.opacity>startopacity) { thing.filters.alpha.opacity-=5; } else { clearInterval(timer); } }

    And then I would do:

    PHP Code:
    <IMG src="picture.gif" style="filter:alpha(opacity=0)" onMouseover="fadeIt(this,2);" onMouseout="fadeIt(this,1);"
    But how would I do it so that this would happen when i mouseover the text link, not the actual pic itself?

    Any method other then the one mentioned above is fine too.
    Thanks again,

  2. #2

    Re: javascript -> fading images out.

    Originally posted by ilyash
    But how would I do it so that this would happen when i mouseover the text link, not the actual pic itself?
    hi - one way would be to use a "name" parameter in your img tags. Then (with some very slight modification to your fadeIt() code), useage would be something like this:

    <img name="fademe" src="whatever.jpg">
    <a href="some_page.html"
    onMouseover="fade_func('fademe', 2)" 
    onMouseout="fade_func('fademe', 1)"> Rollover This Text </a>
    It might help to look at a complete working example, here:
    Last edited by Uptime; 04-21-2005 at 02:52 AM.

  3. #3
    Join Date
    Dec 2004
    What you'd want to do is use CSS to place two images on top of one another (adjust the z-index property to ensure the correct vertical ordering). Normally, the top one is fully opaque and the bottom one is covered by it. When it's time to fade, you fade out the top image and the bottom one slowly becomes visible underneath it.

    Also, you can make your code work in a few more browsers than just IE by modifying a few extra CSS parameters. You can see an example here:

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts